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

Question

我正在创建一个带有输入网格的 Web 表单，用于在 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

Answer 2

虽然A1rPun's answer 执行了所要求的操作，但它在 Firefox 中不起作用。这是因为this Firefox bug，基本上event.preventDefault不会阻止<select>节点上的←和→。

解决方法

我针对这个问题做了一个解决方法，可以用来改进 A1rPun 的答案以支持 Firefox。

function ensurePreventDefault(select) {
    var selectedIndex, scrollTop;
    function saveState() {
        selectedIndex = select.selectedIndex;
        scrollTop = select.scrollTop;
    }

    saveState();
    if (!select.multiple && !select.size) {
        select.addEventListener('change', saveState);
    }

    // use setTimeout to wait a frame and see if the selected index was changed
    setTimeout(function () {
        select.removeEventListener('change', saveState);
        if (select.selectedIndex !== selectedIndex) {
            // Damn you, Firefox!
            select.selectedIndex = selectedIndex;
            select.scrollTop = scrollTop;
        }
    });
}

短版：存储selectedIndex 并在稍后恢复它。

长版：存储selectedIndex，以便我们稍后使用setTimeout检查它是否被Firefox更改。您还需要将这些值存储在 'change' 事件中以完全支持下拉菜单。同时存储scrollTop 以防止Firefox 在多选中滚动。它们呈现为列表，而不是下拉列表，导致 Firefox 在所选索引更改时向下或向上滚动。如果您确实不想想要收听它的'change' 事件，这将产生相反的效果。

用法

你可以这样使用它：

.addEventListener('keydown', function (event) {
    switch (event.which || event.keyCode) {
        case 37: // left arrow
        case 39: // right arrow
            event.preventDefault();
            ensurePreventDefault(this);
            break;
    }
});

JSFiddle

这扩展了 A1rPun 的 JSFiddle。

Answer 3

Ruud's Answer 有效，但如果您仔细观察或在事件中运行大量代码，您会看到选择值更改下一个元素并返回到原始元素。

这是一个适用于 Firefox 的解决方案，对我来说看起来更干净。在其他浏览器中未经测试。

诀窍就是在 keydown 事件中将选择设置为禁用，然后在下一帧使用 setTimeout 重新启用它。在处理完事件处理程序中的所有代码之前，匿名函数不会运行，以确保不会过早重新启用选择。

mySelect.addEventListener('keydown', 
    function (event) {
        switch (event.which || event.keyCode || event.charCode) {
            case 33:
                this.disabled = true;
                setTimeout(function (elem) {elem.disabled = false;}, 0, this);
                break;

            case 34:
                this.disabled = true;
                setTimeout(function (elem) {elem.disabled = false;}, 0, this);
                break;
        }
    });

这是JSFiddle

Answer 4

关于the answer of Ruud Lenders：仅当您在表单中有一个选择时才有效。如果您有多个选择下拉菜单，则可以使用以下版本：

$(document).on('keydown', 'select', function(event) {
    var value = $(this).find('option:selected').val();
    if ((event.which == 37 || event.which === 39)) {
        setTimeout(function (obj, val) {
            console.log(val)
                return function() {
                    obj.find('option[value="' + val + '"]').prop("selected", true)
                }
        }($(this), value), 0);
    }
});