Javascript 在Javascript中，如何在当前文本框已满时自动将光标移动到下一个文本框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4444693/
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
In Javascript, how do I automatically move the cursor to the next text box when the current one is full?
提问by Vivian River
Suppose I have two HTML textboxes on my web page:
假设我的网页上有两个 HTML 文本框：
<input type='text' id='txt1' maxlength='5' />
<input type='text' id='txt2' maxlength='5' />
Each textbox allows the user to type up to five characters. How can I use Javascript with or without jQuery to automatically move the cursor from txt1to txt2when the user types five charcters into txt1?
每个文本框允许用户键入最多五个字符。我如何可以使用JavaScript带或不带jQuery来自动将光标移动txt1到txt2当用户键入5个charcters成txt1？
回答by Paolo Bergantino
A basic implementation would be like this:
一个基本的实现是这样的：
$('#txt1').keyup(function() {
if(this.value.length == $(this).attr('maxlength')) {
$('#txt2').focus();
}
});
But there are some usability subtleties to it you may or may not care about. If you find the above to be insufficient, there are many jQuery plugins out there to do this for you.
但是您可能会或可能不会关心它的一些可用性微妙之处。如果您发现以上内容还不够，有许多 jQuery 插件可以为您完成此操作。
回答by simshaun
It's called autotabbing, and there are many plugins that already exist for jquery that do this. Just google it.
它被称为自动标签，并且已经存在许多用于 jquery 的插件来执行此操作。只是谷歌它。
If you want to know how to do it, then you bind an onkeyup event to inputs. Every time a key is released, make sure its not a functional key such as "Tab" (You should allow the user to "Shift+Tab" or "Tab" to the input without it then autotabbing to the next field.)
如果您想知道怎么做，那么您可以将 onkeyup 事件绑定到输入。每次释放键时，请确保它不是功能键，例如“Tab”（您应该允许用户“Shift+Tab”或“Tab”到输入而不用它然后自动切换到下一个字段。）
Then, if the input value's length exceeds the input's maxlength attribute, set the focus on the next input (in jQuery, $currentInput.next('input').focus().
然后，如果输入值的长度超过输入的 maxlength 属性，则将焦点设置在下一个输入上（在 jQuery 中，$currentInput.next('input').focus().
回答by Eric Sebasta
None of these solutions work in straight Javascript... this snippet is a start:
这些解决方案都不能直接在 Javascript 中工作......这个片段是一个开始：
document.getElementById('txt1').onkeydown = function() {
if (this.value.length == this.maxLength)
document.getElementById('txt2').focus();
}
But once you have entered the number, you can't go back and edit it, because as soon as you hit delete, it jumps back to txt2.
但是一旦你输入了号码，你就不能回去编辑它，因为你一按删除，它就会跳回txt2。
The only thing to change is make it onkeyupinstead. :D
唯一要改变的是改为onkeyup。:D
jQuery is overkill and lazy programming for the vast majority of things it is used on, and this is a greatexample. Unless you are already using it on the page, it is an awfullot of overhead for such a tiny task.
jQuery 对于它所使用的绝大多数事物来说都是矫枉过正和懒惰的编程，这是一个很好的例子。除非您已经在页面上使用它，否则对于这么小的任务来说，这是一个非常大的开销。
回答by laffuste
JQuery plugin:
JQuery 插件：
https://github.com/Mathachew/jquery-autotab
https://github.com/Mathachew/jquery-autotab
Simplest use:
最简单的使用：
Add class autotabbed to your inputs.
将自动选项卡添加到您的输入中。
$('.autotabbed').autotab();
回答by casablanca
The idea is to handle the keydownevent and check if the maximum length has been reached; if so, focus the next control.
想法是处理keydown事件并检查是否已达到最大长度；如果是，则聚焦下一个控件。
document.getElementById('txt1').onkeydown = function() {
if (this.value.length == this.maxLength)
document.getElementById('txt2').focus();
}
回答by treeface
You could utilize jQuery UI's :focusableselector by replicating the class like this:
您可以:focusable通过像这样复制类来利用 jQuery UI 的选择器：
$.extend($.expr[':'], {
focusable: function(element) {
var nodeName = element.nodeName.toLowerCase(),
tabIndex = $.attr(element, 'tabindex');
return (/input|select|textarea|button|object/.test(nodeName)
? !element.disabled
: 'a' == nodeName || 'area' == nodeName
? element.href || !isNaN(tabIndex)
: !isNaN(tabIndex))
// the element and all of its ancestors must be visible
// the browser may report that the area is hidden
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
}
});
Then you can handle it like this:
然后你可以像这样处理它：
$(document).ready(function() {
$('input[type=text]').keydown(function() {
var $this = $(this),
$focusables = $(':focusable'),
current = $focusables.index(this),
$next;
if ($this.val().length == $this.attr('maxlength')) {
$next = $focusables.eq(current+1).length ?$focusables.eq(current+1) : $focusables.eq(0);
$next.focus();
}
});
});
See a working example here:
在此处查看工作示例：
回答by bbrowne81
This solution allows backward tabbing....
此解决方案允许向后跳转....
$("#txt1").on('input', function () {
if (this.value.length == this.maxLength) {
$('#txt2').focus();
}
});
