使用向下箭头键聚焦下一个输入（与制表键一样） [英] Focus the next input with down arrow key (as with the tab key)

问题描述

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

在用户使用tab键移动到下一个feild的表单中，有一些隐藏的字段和使用javascript禁用哪个tab键之间的只读文本框。

现在用户发现难以使用Tab键并且想要在键盘的向下箭头键上使用相同的功能。 / p>

我使用下面的代码来调用js上的tab键代码但不起作用，请一些人帮我这个。

  function handleKeyDownEvent（eventRef）
 {
 var charCode =（window.event）？ eventRef.keyCode：eventRef.which; 
 
 // alert（charCode）; 
 
 //箭头键（37：左，38：上，39：右，40：下）... 
 if（（charCode == 40））
 { 
 
 if（window.event）
 window.event.keyCode = 9; 
 else 
 event.which = 9; 
 
返回false; 
} 
 
返回true; 
} 
 
< input type =textonkeydown =return handleKeyDownEvent（event）; > 
  

解决方案

使用 jQuery ，你可以这样做：

  $（'input，select'）。keydown （function（e）{
 if（e.keyCode == 40）{
 $（this）.next（'input，select'）。focus（）; 
} 
}）; 
  

当您按下向下箭头键（keyCode 40）时，下一个输入将获得焦点。

DEMO

编辑：

在Vanilla 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（）; 
休息; 
} 
 node = node.nextSibling; 
} 
} 
}; 
}; 
} 
 doThing（document.getElementsByTagName（'input'））; 
 doThing（document.getElementsByTagName（'select'））; 
  

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

I have a huge entry form and fields for the users to input.

In the form user use tab key to move to next feild,there are some hidden fields and readonly textboxes in between on which tab key is disabled using javascript.

Now users finds difficult to use tab key and wants same functionality on down arrow key of the keyboard.

I was using the below code to invoke the tab key code on js but not working,please some body help me on this.

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

解决方案

Using jQuery, you can do this :

$('input, select').keydown(function(e) {
    if (e.keyCode==40) {
        $(this).next('input, select').focus();
    }
});

When you press the down arrow key (keyCode 40), the next input receives the focus.

DEMO​

EDIT :

In Vanilla JS, this could be done like this :

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

Note that you'd probably want to map the up key too, and go to first input at last one, etc. I let you handle the details depending on your exact requirements.

这篇关于使用向下箭头键聚焦下一个输入（与制表键一样）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！