从更改下拉菜单选项停止左

从更改下拉菜单选项停止左

本文介绍了HTML / Javascript - 从更改下拉菜单选项停止左/右箭头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在创建一个具有用于在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 - 从更改下拉菜单选项停止左/右箭头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-19 19:43