0

HTML5 日付入力でスクロールを無効にしようとしていますが、うまくいきません。
この入力には webshim フォールバックがあるため、JS は Chrome では動作しますが、Firefox では動作しません。

$('.input-date input').on('mousewheel', function (event) {
  event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script>

<script type="text/javascript">
  webshims.cfg.no$Switch = true;
  webshim.setOptions({
    'forms-ext': {
      widgets: {
        calculateWidth: false
      }
    }
  });
  webshim.polyfill('forms forms-ext');
</script>

<form>
  <div class="input-date">
    <input type="date" value="2015-02-24">
  </div>
</form>

誰もこの問題に直面したことがありますか?

4

1 に答える 1

0

この問題について webshim の作成者と話し合う機会がありましたが、この種の問題を回避するためのオプションがあることがわかりましたnoSpinbtn。

したがって、コードは次のようになります。

$('.input-date input').on('mousewheel', function (event) {
  event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script>

<script type="text/javascript">
  webshims.cfg.no$Switch = true;
  webshim.setOptions({
    'forms-ext': {
      widgets: {
        calculateWidth: false
      },
      date: {
        noSpinbtn: true
      }
    }
  });
  webshim.polyfill('forms forms-ext');
</script>

<form>
  <div class="input-date">
    <input type="date" value="2015-02-24">
  </div>
</form>

于 2015-02-25T08:39:59.270 に答える