jquery 当填充4个字符时自动跳到下一个输入字段

u3r8eeie 于 2023-08-04 发布在 jQuery

关注(0)|答案(7)|浏览(134)

我想做的是，在填充四个字符时指向下一个标签。每个字段应该有4个字符，一旦完成，它应该移动到下一个输入框。

$(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').focus();
        }
  });

字符串
Fiddle的数据。

jquery

来源：https://stackoverflow.com/questions/23888537/auto-tab-to-next-input-field-when-fill-4-characters

7条答案

按热度按时间

5anewei61#

您的代码工作正常，但是您的输入元素被设置为type="number"。非数字内容将被忽略，因此如果输入“abcd”，例如，输入的value为空（意味着0的length）。另一方面，如果输入“1234”，则输入的值为1234。
如果希望代码在输入非数字内容时触发，只需将每个输入的类型更改为text。

<input class="inputs" type="text" maxlength="4" />

字符串
JSFiddle demo的数据。
请注意，我还从该示例中的每个元素中删除了重复的class属性。
正如krish在对你的问题的评论中提到的，你的代码有一个问题，最后一个input元素将继续接受超过4个字符。要解决这个问题，请进行检查以确保存在next('.inputs')元素：

if (this.value.length == this.maxLength) {
  var $next = $(this).next('.inputs');
  if ($next.length)
      $(this).next('.inputs').focus();
  else
      $(this).blur();
}

型
JSFiddle demo。

赞(0）回复(0）举报 2023-08-04

ia2d9nvy2#

也许你忘了把你的代码封装在DOM中。Jsfiddle将您的代码封装在$(window).load(function() { .....})中，这就是它工作的原因。在你自己的页面上用途：

$(function() {
    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').focus();
        }
    });
});

字符串
在jsfiddle中，您可以通过选择No wrap - in <head>然后单击run来确认这一点。代码将不起作用。但是如果你使用上面的DOM ready，它就可以工作了。

赞(0）回复(0）举报 2023-08-04

eiee3dmh3#

<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>

字符串

赞(0）回复(0）举报 2023-08-04

dw1jzc5e4#

这里是一个改进的版本，所有谁需要这对某种分裂的信息，如串行键或类似的东西：

$(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();
        }
    });
});

个字符

赞(0）回复(0）举报 2023-08-04

s71maibg5#

我的第一个问题是，如果在已经填充的字段中进行制表，您必须手动选择每个字段。我的建议是：

$(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').select(); 
        }
});

字符串
第二个问题的解决方法让我很困惑。基本上，在先前已填充字段的相同情况下，如果键入太快，则事件将如下触发：按键向下按键向上按键向上
这会导致跳过下一个输入。

赞(0）回复(0）举报 2023-08-04

ecfdbz9o6#

对于那些谁尝试了公认的答案，但无法找到像我这样的解决方案

在您的布局页面或页眉，只需输入 AJAX 库链接（如下图所示）
它在我身上起作用了，希望它也能帮助你。

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      var $next = $(this).next('.inputs');
      if ($next.length)
          $(this).next('.inputs').focus();
      else
          $(this).blur();
    }
});

个字符

赞(0）回复(0）举报 2023-08-04

ctzwtxfj7#

我发现这段代码在honCode脚本中工作得很好，该脚本有多个序列号输入框。
纯JS：

function onchechnge(i){
    var dom = document.getElementById("key"+i);
    var ml = dom.maxLength;
    var lg = dom.value.length;
    if (lg >= ml) {
        document.getElementById("key"+(i+1)).focus()
    }
}

字符串
超文本标记语言：

<fieldset id=serialkey>
    <input name=key1 id=key1 onkeypress="onchechnge(1)" type=text size=3 maxlength=5> 
    <input name=key2 id=key2 onkeypress="onchechnge(2)" type=text size=3 maxlength=5>
    <input name=key3 id=key3 onkeypress="onchechnge(3)" type=text size=3 maxlength=5>
    <input name=key4 id=key4 onkeypress="onchechnge(4)" type=text size=3 maxlength=5> 
    <input name=key5 id=key5 type=text size=3 maxlength=5>
</fieldset>

型

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 当填充4个字符时自动跳到下一个输入字段

7条答案

相关问题

热门标签

最新问答