如何禁用向上和向下箭頭鍵

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; 
        } 
    });
});