Javascript 使用向下箭头键聚焦下一个输入（与 Tab 键一样）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12407093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Focus the next input with down arrow key (as with the tab key)
提问by lakshmi kanth
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.
在用户使用 Tab 键移动到下一个字段的表单中，有一些隐藏字段和只读文本框，其中使用 javascript 禁用了 Tab 键。
Now users finds difficult to use tab key and wants same functionality on down arrow key of the keyboard.
现在用户发现难以使用 Tab 键并希望键盘的向下箭头键具有相同的功能。
I was using the below code to invoke the tab key code on js but not working,please some body help me on this.
我正在使用下面的代码来调用 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);" >
回答by Denys Séguret
Using jQuery, you can do this :
使用jQuery，您可以这样做：
$('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.
当您按下向下箭头键 (keyCode 40) 时，下一个输入接收焦点。
DEMO?
演示？
EDIT :
编辑 ：
In Vanilla JS, this could be done like this :
在 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();
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.
请注意，您可能也想映射 up 键，并在最后一个输入第一个输入，等等。我让您根据您的确切要求处理细节。
回答by lakshmi kanth
This is my final working code:
这是我最终的工作代码：
$('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();
}
});
回答by D. Strout
If I understand correctly, some fields are read-only, so the tab key still activatesthem, even though they are read-only, and this is annoying, as you have to press the tab key perhaps several times to get to the next editable field. If that is correct, then an alternate solution would be to use the tabindexattribute on your input fields, indexing each one so that the read-only and otherwise non-editable fields aren't selected. You can find more info on the tabindex attribute here.
如果我理解正确，有些字段是只读的，因此即使它们是只读的，tab 键仍然会激活它们，这很烦人，因为您可能必须多次按下 tab 键才能进入下一个可编辑场地。如果这是正确的，那么另一种解决方案是tabindex在输入字段上使用该属性，为每个字段建立索引，以便不选择只读字段和其他不可编辑字段。您可以在此处找到有关 tabindex 属性的更多信息。
