Javascript 使用向下箭头键(与tab键一样)聚焦下一个输入
我有一个巨大的输入表单和字段供用户输入 在用户使用tab键移动到下一个字段的表单中,有一些隐藏字段和只读文本框,在这些字段和文本框之间使用javascript禁用tab键 现在用户发现很难使用tab键,并希望在键盘的向下箭头键上具有相同的功能 我正在使用下面的代码调用js上的tab键代码,但不起作用,请一些人帮我解决这个问题Javascript 使用向下箭头键(与tab键一样)聚焦下一个输入,javascript,Javascript,我有一个巨大的输入表单和字段供用户输入 在用户使用tab键移动到下一个字段的表单中,有一些隐藏字段和只读文本框,在这些字段和文本框之间使用javascript禁用tab键 现在用户发现很难使用tab键,并希望在键盘的向下箭头键上具有相同的功能 我正在使用下面的代码调用js上的tab键代码,但不起作用,请一些人帮我解决这个问题 function handleKeyDownEvent(eventRef) { var charCode = (window.event) ? eventRef.key
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);" >
函数handleKeyDownEvent(eventRef)
{
var charCode=(window.event)?eventRef.keyCode:eventRef.which;
//警报(字符码);
//箭头键(37:左,38:上,39:右,40:下)。。。
如果((字符代码==40))
{
if(window.event)
window.event.keyCode=9;
其他的
event.which=9;
返回false;
}
返回true;
}
使用,您可以执行以下操作:
$('input, select').keydown(function(e) {
if (e.keyCode==40) {
$(this).next('input, select').focus();
}
});
按下向下箭头键(键代码40)时,下一个输入接收焦点
编辑:
在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'));
函数点(输入){
对于(var i=0;i如果我理解正确,某些字段是只读的,因此tab键仍然会激活它们,即使它们是只读的,这很烦人,因为您可能需要多次按tab键才能进入下一个可编辑字段。如果这是正确的,那么另一种解决方案是使用tabindex
属性o在您的输入字段中,为每个字段编制索引,以便不选择只读字段和其他不可编辑字段。您可以在tabindex属性中找到更多信息。这是我的最终工作代码:
$('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();
}
});
可能重复@Neal+1的人太多了,我有点太习惯用巧克力写Javascript了。如果需要移植到vanilla js,nextSibling是一个不错的选择。@Neal但你仍然想过滤输入,这不能用nextSibling完成,所以你必须循环:(所以循环@dystroy!这就是。next()
无论如何都可以!我将它移植到vanilla js中。只是因为我们必须让我们的头脑能够做到这一点。但这更乏味,即使它可能更短。@dystroy,你会如何处理它js@strout,我可以为只读字段禁用tabindex,我需要在向下箭头键上实现tab键功能..谢谢我只是缺少:不是(“只读”).不过这是一种魅力,谢谢你。