使用向下箭头键(与tab键一样）聚焦下一个输入

Focus the next input with down arrow key (as with the tab key)

本文关键字：一样 输入 下一个 聚焦 tab      更新时间：2023-09-26

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

在用户使用制表键移动到下一个字段的表单中，有一些隐藏字段和只读文本框，在它们之间使用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();
    }
});

按下向下箭头键（键Code 40）时，下一个输入将接收焦点。

演示​

编辑：

在VanillaJS中，可以这样做：

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'));

请注意，您可能也想映射向上键，并在最后一个键处转到第一个输入，等等。我让您根据您的确切要求处理细节。

这是我的最后一个工作代码：

$('input[type="text"],textarea').keydown( function(e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    if(key == 40) {
        e.preventDefault();
        var inputs = $(this).parents('form').find(':input[type="text"]:enabled:visible:not("disabled"),textarea');
        inputs.eq( inputs.index(this)+ 1 ).focus();
        inputs.eq( inputs.index(this)+ 1 ).click();
    }
});

如果我理解正确，有些字段是只读的，所以tab键仍然激活它们，即使它们是只读的。这很烦人，因为你可能需要按tab键几次才能进入下一个可编辑字段。如果这是正确的，那么另一种解决方案是在输入字段上使用tabindex属性，对每个字段进行索引，这样就不会选择只读字段和其他不可编辑字段。您可以在此处找到有关tabindex属性的更多信息。

相关文章：