HTML / Javascript - 从更改下拉菜单选项停止左/右箭头 [英] HTML / Javascript - stop left /right arrow from changing dropdown menu choice

问题描述

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

I am creating a web form with a grid of inputs for creating objects in Django.

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

It seems that when the focus is on a drop down menu, the up and left arrows select the previous item and right / down arrows select the next item.

我想使用左/右箭头将焦点向左或向右移动到网格上（有点像excel）。我可以禁用左/右箭头来更改菜单选项（同时保持上/下箭头的功能）？

I would like to use the left / right arrows to move focus left or right on the grid (a bit like excel does). Can I disable the left / right arrows from changing the menu choice, (while keeping the functionality for the up / down arrows)?

推荐答案

p>更改控件的默认行为有时令用户感到沮丧。但是其他时候，用户期望它像excel一样工作，就像你的情况：）

Changing default behavior of controls is sometimes frustrating for users. But other times the user expect it works like excel like in your case :)

你可以这样做：

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（）; 防止def您所按的密钥的一个行为。

Key 37 = ← and key 39 is →.
e.preventDefault(); prevents the default behaviour of the key you pressed.

这篇关于HTML / Javascript - 从更改下拉菜单选项停止左/右箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！