如何禁用向上和向下箭头键

Question

我正在尝试为选择列表字段禁用上下箭头 function。 我已经搜索并尝试了所有选项，但无法禁用。 当用按键发出警报时它正在工作，但当我尝试禁用它时它不起作用。 是否有任何与浏览器相关的更新

我的 Chrome 版本：89.0.4389.128（正式版）（64 位）

// we are closing the arrow keys for selection
$(function()
{
    $('.form-contact').on('keyup',function(e) {
        if(e.keyCode === 38 || e.keyCode === 40) { //up or down
            // alert(e.keyCode)
            e.preventDefault();
            return false; 
        } 
    });
});

最后的代码是这样的。 它不会阻止向上或向下箭头指向列表，但它会阻止通过从列表中输入进行选择。 所以聊胜于无。 仍然打开我的问题。

 $('.form-contact,.form-company,.form-address,.form-postcode,.form-phone,.form-email').on('keydown', (e) => {
    if (e.target.localName != 'input') {   // if you need to filter <input> elements
        switch (e.keyCode) {
            case 38: // up
            case 40: // down
                e.preventDefault();
                break;
            default:
                break;
            }
        }
    }, {
        capture: true,   // this disables arrow key scrolling in modern Chrome
        passive: false   // this is optional, my code works without it
    });

Answer 1

这可能会有所帮助：

window.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
        e.preventDefault();
    }
}, false);

在这里找到它在用户浏览器中禁用箭头键滚动

Answer 2

使用 keydown 事件代替 keyup

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