Javascript 如何使用 jQuery 将焦点移到下一个输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2455225/
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
How do I move focus to next input with jQuery?
提问by Matt
I am using the autocomplete plugin with jQuery and it is working fine. However, in IE, when the user selects an item in the autocomplete, the focus does not then move to the next input field. Naturally it works in Firefox. The plugin doesn't have a built-in solution but does provide for "options". Is there a way I can force it to move to the next input field?
我正在使用带有 jQuery 的自动完成插件，它工作正常。然而，在 IE 中，当用户在自动完成中选择一个项目时，焦点不会移动到下一个输入字段。它自然适用于 Firefox。该插件没有内置解决方案，但确实提供了“选项”。有没有办法强制它移动到下一个输入字段？
回答by Nick Craver
You can do something like this:
你可以这样做：
$("input").change(function() {
var inputs = $(this).closest('form').find(':input');
inputs.eq( inputs.index(this)+ 1 ).focus();
});
The other answers posted here may not work for you since they depend on the next input being the very next sibling element, which often isn't the case. This approach goes up to the form and searches for the next input type element.
此处发布的其他答案可能对您不起作用，因为它们取决于下一个输入是下一个同级元素，而情况通常并非如此。这种方法上升到表单并搜索下一个输入类型元素。
回答by Lambert Antonio
JQuery UI already has this, in my example below I included a maxchar attribute to focus on the next focus-able element (input, select, textarea, button and object) if i typed in the max number of characters
JQuery UI 已经有了这个，在我下面的例子中，如果我输入了最大字符数，我包含了一个 maxchar 属性来关注下一个可聚焦元素（输入、选择、文本区域、按钮和对象）
HTML:
HTML：
text 1 <input type="text" value="" id="txt1" maxchar="5" /><br />
text 2 <input type="text" value="" id="txt2" maxchar="5" /><br />
checkbox 1 <input type="checkbox" value="" id="chk1" /><br />
checkbox 2 <input type="checkbox" value="" id="chk2" /><br />
dropdown 1 <select id="dd1" >
<option value="1">1</option>
<option value="1">2</option>
</select><br />
dropdown 2 <select id="dd2">
<option value="1">1</option>
<option value="1">2</option>
</select>
Javascript:
Javascript:
$(function() {
var focusables = $(":focusable");
focusables.keyup(function(e) {
var maxchar = false;
if ($(this).attr("maxchar")) {
if ($(this).val().length >= $(this).attr("maxchar"))
maxchar = true;
}
if (e.keyCode == 13 || maxchar) {
var current = focusables.index(this),
next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0);
next.focus();
}
});
});
回答by ant
What Sam meant was :
山姆的意思是：
$('#myInput').focus(function(){
$(this).next('input').focus();
})
回答by bussa
Try using something like:
尝试使用类似的东西：
var inputs = $(this).closest('form').find(':focusable');
inputs.eq(inputs.index(this) + 1).focus();
回答by mindmyweb
why not simply just give the input field where you want to jump to a id and do a simple focus
为什么不简单地给你想要跳转到一个 id 的输入字段并做一个简单的焦点
$("#newListField").focus();
回答by Aditya Mittal
function nextFormInput() {
var focused = $(':focus');
var inputs = $(focused).closest('form').find(':input');
inputs.eq(inputs.index(focused) + 1).focus();
}
回答by temo
Use eqto get to specific element.
使用eq获取特定元素。
Documentation about index
关于索引的文档
$("input").keyup(function () {
var index = $(this).index("input");
$("input:eq(" + (index +1) + ")").focus();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />回答by NASSER KHANZADI
you cat use it
你的猫用它
$(document).on("keypress","input,select",function (e) {
e.preventDefault();
if (e.keyCode==13) {
$(':input:eq(' + ($(':input').index(this) + 1) +')').focus();
}
});
回答by Hoffmann
I just wrote a jQuery plugin that does what you are looking for (annoyed that that I couldn't find andy solution myself (tabStop -> http://plugins.jquery.com/tabstop/)
我刚刚写了一个 jQuery 插件，可以满足您的需求（很恼火，我自己找不到解决方案（tabStop -> http://plugins.jquery.com/tabstop/）
回答by Sam
Could you post some of your HTML as an example?
您可以发布一些 HTML 作为示例吗？
In the mean-time, try this:
与此同时，试试这个：
$('#myInput').result(function(){
$(this).next('input').focus();
})
That's untested, so it'll probably need some tweaking.
这是未经测试的，因此可能需要进行一些调整。
