javascript - HTML/Javascript - 停止左/右箭头更改下拉菜单选项

Question

我正在创建一个带有输入网格的网络表单，用于在 Django 中创建对象。

似乎当焦点在下拉菜单上时，向上和向左箭头选择上一个项目，向右/向下箭头选择下一个项目。

我想使用左/右箭头在网格上向左或向右移动焦点(有点像 excel 的做法)。我可以禁用左/右箭头来更改菜单选项吗(同时保留上/下箭头的功能)？

Answer 1

更改控件的默认行为有时会让用户感到沮丧。但有时用户希望它像您的情况一样像 excel 一样工作:)

你可以这样做:

var selects = document.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++){
    selects[i].addEventListener('keydown',function(e){    
        var key = e.which || e.keyCode;
        if(key == 37){
            var previousSibling = this.previousSibling;
            while(previousSibling && previousSibling.nodeType != 1) {
                previousSibling = previousSibling.previousSibling
            }
            previousSibling.focus();
            e.preventDefault();
        }else if(key === 39){
            var nextSibling = this.nextSibling;
            while(nextSibling && nextSibling.nodeType != 1) {
                nextSibling = nextSibling.nextSibling
            }
            nextSibling.focus();
            e.preventDefault();
        }
    })
}

37键=←，39键是→。
e.preventDefault(); 阻止您按下的键的默认行为。

Fiddle