达到 maxlength 错误时将焦点移到 keyup 上答案

【问题标题】：Move focus on keyup when maxlength is reached error达到 maxlength 错误时将焦点移到 keyup 上
【发布时间】：2019-12-11 10:22:48
【问题描述】：

当达到 maxlength 时，我使用 Jquery 将焦点从“输入 A”移动到“输入 B”。另外，我已将其设置为当字符值达到 0 并按下退格键时，焦点会返回到输入 A。这样用户就可以轻松地在两个字段中键入，就好像它是一个连续的字段一样。

我遇到的问题是，当我从输入 B 中删除所有字符并且焦点切换回“输入 A”并开始输入时，第一次按键被忽略（它仍然将焦点切换到“输入 B ')。

jQuery(function($) {
  // Tab to next item when maxlength is reached
  $(".postcode div:nth-child(1) input").keyup(function() {
    if (this.value.length == this.maxLength) {
      $(this).parent().next().find('input').focus();
    }
  });

  // Tab to previous Item when backspace is pressed and length is 0
  $(".postcode div:nth-child(2) input").on('keyup', function(e) {
    if (e.which == 8) {
      if (this.value.length == 0) {
        $(this).parent().prev().find('input').focus();
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="postcode">
  <div>
    <input type="text" maxlength="4">
  </div>
  <div>
    <input type="text" maxlength="4">
  </div>
</div>

您可以通过clicking here查看此错误的运行情况

【问题讨论】：

除非我忽略了这一点，否则当您从 B 返回 A 时，该字段中仍有 4 个字符，因此按下另一个字符会将您移动到 B - 这就是您的代码所做的。预期的行为是什么？
没错，但我需要按键来注册并显示在“输入 B”中，以便在两个框之间进行无缝输入。此时按键被忽略，您必须再次按键才能输入字符。
所以实际上你需要在空 B 中删除以删除 A 中的最后一个字符以及切换焦点，对吧？
没有。让我们假设这两个输入是一个输入框。如果我输入 5 个字符，然后删除一个，下一次按键应该添加一个新的第 5 个字符。现在在输入第 5 个字符时，它会专注于下一个输入，但会忽略实际字符。您可以通过输入“AAAAC”然后删除“C”并尝试输入新字符来复制此操作。焦点将转移到“输入 B”，但不会输入您输入的新字符。希望这是有道理的。
这是有道理的，但是如果用户先在第二个框中输入，那么这样做会导致问题（他们会因为用户喜欢破坏东西:)

标签： jquery

【解决方案1】：

在您的事件上使用一个参数，以便将事件的上下文存储在其中。从那里我们可以得到用户点击了什么类型的按钮或字符。我使用e 并通过e.key 获取值。

我添加了另一个事件处理程序 keypress。另一个答案将值分配放在keyup 当达到最大长度时将填充用户点击两次（第一个字段的一个输入，第二个字段的另一个输入）。通过使用按键，我们能够在字段上实际输入之前确定字段的长度。

jQuery(function($) {
  // Tab to next item when maxlength is reached
  $(".postcode div:nth-child(1) input").keyup(function() {
    if (this.value.length == this.maxLength) {
      $(this).parent().next().find('input').focus();
    }
  });

  // new event to handle keypress which happens before keyup
  $(".postcode div:nth-child(1) input").keypress(function(e) {
    if (this.value.length == this.maxLength) {
      $(this).parent().next().find('input').val(e.key);
    }
  });

  // Tab to previous Item when backspace is pressed and length is 0
  $(".postcode div:nth-child(2) input").on('keyup', function(e) {
    if (e.which == 8) {
      if (this.value.length == 0) {
        $(this).parent().prev().find('input').focus();
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="postcode">
  <div>
    <input type="text" maxlength="4">
  </div>
  <div>
    <input type="text" maxlength="4">
  </div>
</div>

【讨论】：

【解决方案2】：

当达到第一个字段的字符限制时，除了切换焦点外，还需要保存按下的键值并将其设置为第二个输入的值。

您可以从keyup 处理程序事件参数中获取值并将其设置为第二个字段值。目前你只是切换焦点，所以你需要按两次键。

类似这样的：

$(".postcode div:nth-child(1) input").keyup(function(event) { if (this.value.length == this.maxLength) { $(this).parent().next().find('input') .focus() .val(String.fromCharCode(event.keyCode)); } });

【讨论】：