javascript - How to disable arrow keys for dropdown/selector element?

Question

What is a good jquery/javascript approach to prevent a user from using the up and down arrow keys to select options in a dropdown box (i.e. to force the user to only use the mouse to select menu options)? Thanks!

Answer 1

#1。不要那样做，_{^{它会影响用户体验}}

但如果你是：

$('select').on('keydown', function(e){
    if(e.keyCode === 38 || e.keyCode === 40) { //up or down
        e.preventDefault();
        return false;
    }
});

Answer 2

对于最新的 Firefox 和 Chrome（即任何人？;-)

我已经修改了一些代码来根据需要模拟禁用向上和向下箭头键。我必须对我的应用程序的 arrowUp / pageUp 和 arrowDown / pageDown 键进行类似操作，以允许自定义键盘导航（我保留了用于垂直菜单导航的 arrowLeft / arrowRight 键功能）。请注意，我应用了 setTimeout，这似乎是 Firefox (latest) 所需要的：

$(document).on('keydown', 'select', function (e) {
var optsel = $(this).find('option:selected').val();
if ( (e.which == 38 || e.which === 40) ) {
setTimeout(function(){$('select option[value="' + optsel +'"]').prop("selected", true)}, 0);
}
});

诀窍是将选择菜单中选择的最后一个值保存为变量，然后按照 Firefox 的要求（至少）使用 setTimeout 方法调用它。