javascript – 使用向下箭头键对下一个输入(与标签键一样)

我有一个巨大的输入表单和字段供用户输入.

用户使用tab键移动到下一个feild的形式中,有一些隐藏的字段和只读文本框之间,使用javascript禁用哪个标签键.

现在用户发现难以使用的选项卡键,并希望键盘的向下箭头键具有相同的功能.

我正在使用下面的代码调用js上的tab键代码,但不工作,请一些身体帮助我.

function handleKeyDownEvent(eventRef)
{ 
 var charCode = (window.event) ? eventRef.keyCode : eventRef.which;

 //alert(charCode);

 // Arrow keys (37:left,38:up,39:right,40:down)...
 if (  (charCode == 40) )
 {

  if ( window.event )
   window.event.keyCode = 9;
  else
   event.which = 9;

  return false;
 }

 return true;
}

<input type="text"   onkeydown=" return  handleKeyDownEvent(event);" >

解决方法

使用 jQuery可以这样做:
$('input,select').keydown(function(e) {
    if (e.keyCode==40) {
        $(this).next('input,select').focus();
    }
});

当您按下向下箭头键(keyCode 40)时,下一个输入将接收焦点.

DEMO

编辑:

在香草JS中,可以这样做:

function doThing(inputs) {    
    for (var i=0; i<inputs.length; i++) {
        inputs[i].onkeydown = function(e) {
            if (e.keyCode==40) {
                var node = this.nextSibling;
                while (node) {
                    console.log(node.tagName);
                    if (node.tagName=='INPUT' || node.tagName=='SELECT') {
                        node.focus();
                        break;
                    }
                    node = node.nextSibling;                
                }
            }
        };
    };
}
doThing(document.getElementsByTagName('input'));
doThing(document.getElementsByTagName('select'));

请注意,您可能还想映射上传键,然后转到最后一个输入,等等.我可以根据您的具体要求处理详细信息.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...