Автоматическая вкладка в следующее поле ввода при заполнении 4 символов

То, что я пытаюсь сделать, - указать на следующую вкладку при заполнении четырех символов. Каждое поле должно содержать 4 символа, и после его завершения он должен перейти к следующему полю ввода.

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

Скрипт.

Ответы

Ответ 1

Ваш код работает отлично, однако ваши входные элементы задаются как type="number". Нечисловое содержимое игнорируется, поэтому, если вы вводите "abcd", например, входное value пусто (что означает length 0). Если вы вводите "1234", с другой стороны, входное значение равно 1234.

Если вы хотите, чтобы ваш код срабатывал при вводе нечислового содержимого, просто измените каждый тип ввода на text.

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

JSFiddle демо.

Обратите внимание, что я также удалил атрибут duplicate class из каждого из ваших элементов в этом примере.

Как сказал криш в комментариях к вашему вопросу, в вашем коде есть проблема с тем, что последний элемент input будет продолжать принимать более 4 символов. Чтобы исправить это, поставьте чек на место, чтобы убедиться, что есть next('.inputs') элемент next('.inputs'):

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

JSFiddle демо.

Ответ 2

Возможно, вы пренебрегли приложением своего кода в 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 готов, он работает.

Ответ 3

<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

Вот улучшенная версия для всех, кому это нужно для каких-то разделенных Информаций, таких как серийный ключ или что-то в этом роде:

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

Моя первая проблема с этим была в том, что если вы заполняете поля, которые уже заполнены, вам нужно выбрать каждое поле вручную. Я предлагаю следующее:

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

Решение второй проблемы ускользает от меня. В принципе, в той же ситуации, когда поля были заполнены ранее, если вы набираете слишком быстро, события будут запускаться как таковые: KeyDown KeyDown KeyUp KeyUp

Это приводит к пропуску следующего ввода.