16708


コンボボックスフォーカス時に、  
左右キー押下でコンボボックスの値が変更されるのをキャンセルしたいのですが、  
方法はありますでしょうか？

ちなみに、  
javascriptのkeydownイベントに、

[code]

    event.stopPropagation();
    event.preventDefault();
    return false;
    
[/code]

などを記述してみましたが効きませんでした。


CC BY-SA 3.0
2015-09-16T05:25:19.787
16676
2019-12-13T17:55:43.350
2015-09-17T11:19:20.980
8000
12327
question
javascript jquery html firefox
コンボボックスフォーカス時に、左右キー押下で値が変更されるのをキャンセルしたい


Windows 上の Chrome 45 と Firefox 37 で「左右キーで値を変更できる」ことを確認しましたが、Chrome
についてはご質問でも挙げられている `preventDefault()` で抑制することができました。

例

[code]

    $('select').on('keydown', function(e) {
      if (e.keyCode === 37 || e.keyCode === 39) {
        e.preventDefault();
      }
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <select>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
[/code]

IE11 では左右キーを押しても値は変更できませんが、上下キーについて同じように抑制できました。

一方、この方法は Firefox では使えません。そのため「keydown
イベント内で現在の値を調べて、後でその値に設定しなおす」といったハックが必要なようです。

[code]

    $('select').on('keydown', function(e) {
        if(e.keyCode === 39 || e.keyCode === 41) {
            var select = this;
            var index = select.selectedIndex;
            setTimeout(function () { select.selectedIndex = index }, 0);
        }
    });
    
[/code]

例

[code]

    $('select').on('keydown', function(e) {
      if (e.keyCode === 39 || e.keyCode === 41) {
        var select = this;
        var index = select.selectedIndex;
        setTimeout(function() {
          select.selectedIndex = index
        }, 0);
      }
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <select>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
[/code]

Firefox
のこの挙動は[バグ報告されている](https://bugzilla.mozilla.org/show_bug.cgi?id=291082)ものの、未だそのままです。[ソースコードには「他のブラウザでもできないので」と書かれています](http://hg.mozilla.org/mozilla-
central/file/e7d613b3bcfe/layout/forms/nsListControlFrame.cpp#l2087)が、今や
Chrome でも IE でもできるので理由としては弱いですね。

参考 [stop left /right arrow from changing dropdown menu choice - Stack
Overflow](https://stackoverflow.com/a/31206759/2818869)


CC BY-SA 4.0
2015-09-17T11:14:14.687
16708
2019-12-13T17:55:43.350
2019-12-13T17:55:43.350
32986
8000
16676
answer