コンボボックスフォーカス時に、
左右キー押下でコンボボックスの値が変更されるのをキャンセルしたいのですが、
方法はありますでしょうか?
ちなみに、
javascriptのkeydownイベントに、
event.stopPropagation();
event.preventDefault();
return false;
などを記述してみましたが効きませんでした。
Windows 上の Chrome 45 と Firefox 37 で「左右キーで値を変更できる」ことを確認しましたが、Chrome についてはご質問でも挙げられている preventDefault()
で抑制することができました。
例
$('select').on('keydown', function(e) {
if (e.keyCode === 37 || e.keyCode === 39) {
e.preventDefault();
}
});
<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>
IE11 では左右キーを押しても値は変更できませんが、上下キーについて同じように抑制できました。
一方、この方法は Firefox では使えません。そのため「keydown イベント内で現在の値を調べて、後でその値に設定しなおす」といったハックが必要なようです。
$('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);
}
});
例
$('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);
}
});
<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>
Firefox のこの挙動はバグ報告されているものの、未だそのままです。ソースコードには「他のブラウザでもできないので」と書かれていますが、今や Chrome でも IE でもできるので理由としては弱いですね。
参考 stop left /right arrow from changing dropdown menu choice - Stack Overflow
mac yosemite 10.10
+Chrome 45
では、左右キーで値は変更されませんでした。問題となっている html, js を追加されると回答されやすいと考えます。