填写 4 个字符时自动跳到下一个输入字段
[英]Auto tab to next input field when fill 4 characters
问题描述
What I am trying to do is, point to next tab when filling four characters.
我要做的是，在填充四个字符时指向下一个选项卡。 Each field should have 4 characters and once it is completed it should move to next input box.每个字段应该有 4 个字符，一旦完成，它应该移动到下一个输入框。
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
6 个解决方案
解决方案1
31 已采纳 2014-05-27 11:48:25
Your code works fine, however your input elements are set as type="number" . 您的代码可以正常工作，但是您的输入元素设置为type="number" 。 Non-numeric content is ignored, so if you enter "abcd", for example, the input's value is empty (meaning a length of 0 ). 非数字内容将被忽略，因此，例如，如果输入“ abcd”，则输入的value空（表示length为0 ）。 If you enter "1234" on the other hand, the input's value is 1234 . 另一方面，如果输入“ 1234”，则输入值为1234 。
If you want your code to fire when non-numeric content is entered, simply change each input's type to text . 如果您希望在输入非数字内容时触发代码，只需将每个输入的类型更改为text 。
<input class="inputs" type="text" maxlength="4" />
Note that I've also removed the duplicate class attribute from each of your elements in that example, too. 请注意，在该示例中，我还从每个元素中删除了重复的class属性。
As krish has mentioned in the comments on your question, there is an issue with your code in that the last input element will continue to accept more than 4 characters. 正如krish在对您的问题的评论中提到的那样 ，您的代码存在一个问题，即最后一个input元素将继续接受超过4个字符。 To fix this, put a check in place to ensure that there is a next('.inputs') element: 要解决此问题，请检查一下以确保存在next('.inputs')元素：
if (this.value.length == this.maxLength) {
var $next = $(this).next('.inputs');
if ($next.length)
$(this).next('.inputs').focus();
else
$(this).blur();
}
解决方案2
1 2014-05-27 11:50:57
Perhaps you neglected to enclose your code in DOM ready. 也许您忽略了将代码包含在DOM中。 Jsfiddle encloses your code in $(window).load(function() { .....}) and that's why it's working. Jsfiddle将您的代码包含在$(window).load(function() { .....}) ，这就是它起作用的原因。 So on your own page use: 因此，在您自己的页面上使用：
$(function() {
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
});
In the jsfiddle you can confirm that by selecting No wrap - in <head> and then click run. 在jsfiddle中，您可以通过选择No wrap - in <head> wrap-然后单击run来确认。 The code will not work. 该代码将无法正常工作。 But if you use the above which is enclosed in DOM ready, it works. 但是，如果您使用上面随附在DOM中的上述内容，则可以使用。
解决方案3
0 2014-05-27 11:58:16
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<Script>
$(document).ready(function(){
$(".inputs").keyup(function () {
$this=$(this);
if ($this.val().length >=$this.data("maxlength")) {
if($this.val().length>$this.data("maxlength")){
$this.val($this.val().substring(0,4));
}
$this.next(".inputs").focus();
}
});
});
</Script>
</head>
<body>
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
</body>
解决方案4
0 2017-06-07 12:13:46
Here is a improved Version for all who need this for some kind of splitted Informations like a serial key or something like that: 这是一个改进的版本，适用于所有需要一些诸如串行密钥之类的拆分信息的人：
$(document).ready(function(){ $(".amazonInput").keydown(function (e) { var code = e.which; $this=$(this); if ($this.val().length >=$this.data("maxlength") && code != 8) { if($this.val().length>$this.data("maxlength")){ $this.val($this.val().substring(0,4)); } $this.next(".amazonInput").focus(); } if($this.val().length == 0 && code == 8) { $this.prev(".amazonInput").focus(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解决方案5
0 2018-04-20 20:28:22
My first issue with this has been that if tabbing through fields that are already filled, you have to select each field manually. 我的第一个问题是，如果要浏览已填写的字段，则必须手动选择每个字段。 I suggest this: 我建议这样：
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').select();
}
});
The second issue's solution escapes me. 第二个问题的解决方案使我无所适从。 Basically, in the same situation of having fields previously filled, if you type too quickly the events will fire as such: KeyDown KeyDown KeyUp KeyUp 基本上，在以前填充字段的情况下，如果键入得太快，则事件将这样触发：KeyDown KeyDown KeyUp KeyUp
What this causes, is to skip the next input. 这导致的是跳过下一个输入。
解决方案6
0 2022-08-24 12:36:05
For those Who Have tried the Accepted Answer, but Couldn't find solution like me对于那些尝试过接受的答案但找不到像我这样的解决方案的人
In your Layout Page or page header, just input ajax library link (Shown in below)在您的布局页面或页面 header 中，只需输入 ajax 库链接（如下所示）
It worked on me, Hope It will help you as well.它对我有用，希望它也能帮助你。
$(".inputs").keyup(function () { if (this.value.length == this.maxLength) { var $next = $(this).next('.inputs'); if ($next.length) $(this).next('.inputs').focus(); else $(this).blur(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <input class="inputs" type="text" maxlength="4" style="font-size:10px" /> <input class="inputs" type="text" maxlength="4" style="font-size:10px" /> <input class="inputs" type="text" maxlength="4" style="font-size:10px" /> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.