Question

如果我输入一些数字，然后选择第一个input并开始输入新数字，则新数字不会替代旧的value。如何设置代码以遵循keydown函数，同时用新值替换旧值？

// jQuery
$(".code-input").on("keyup", function() {
  if ($(this).val()) {
    $(this)
      .next()
      .focus();
  }
});
$(".code-input").on("keydown", function(e) {
  if ((e.which == 8 || e.which == 46) && $(this).val() == "") {
    $(this)
      .prev("input")
      .focus();
  }
});
$(".code-input").on("paste", function(e) {
  e.preventDefault();
  var text = e.originalEvent.clipboardData.getData("text");
  var textArray = text.split("");

  $(".code-input").each(function(index, element) {
    $(element).val(textArray[index]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="code-input" maxlength="1" name="verifyCode1">
<input type="text" class="code-input" maxlength="1" name="verifyCode2">
<input type="text" class="code-input" maxlength="1" name="verifyCode3">
<input type="text" class="code-input" maxlength="1" name="verifyCode4">
<input type="text" class="code-input" maxlength="1" name="verifyCode5">
<input type="text" class="code-input" maxlength="1" name="verifyCode6">

Answer 1

我建议使用相同的事件，而不要像这样使用keyup和keydown：

// jQuery
$(".code-input").on("keyup", function(e) {
  if ((e.which == 8 || e.which == 46) && $(this).val() == "") {
    $(this)
      .prev("input")
      .select();
  } else if ($(this).val()) {
    $(this)
      .next()
      .select();
  }
});
$(".code-input").on("paste", function(e) {
  e.preventDefault();
  var text = e.originalEvent.clipboardData.getData("text");
  var textArray = text.split("");

  $(".code-input").each(function(index, element) {
    $(element).val(textArray[index]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="code-input" maxlength="1" name="verifyCode1">
<input type="text" class="code-input" maxlength="1" name="verifyCode2">
<input type="text" class="code-input" maxlength="1" name="verifyCode3">
<input type="text" class="code-input" maxlength="1" name="verifyCode4">
<input type="text" class="code-input" maxlength="1" name="verifyCode5">
<input type="text" class="code-input" maxlength="1" name="verifyCode6">

那样，您不必为更改两个keyup / keydown事件的焦点而斗争。

Answer 2

如果当用户将焦点放在文本上时自动在框中选择文本，那么他们接下来输入的内容都将替换其中的内容。尝试将此事件添加到您的代码中：

$(".code-input").on("focus", function(e) {
      $(this).select();
});

或者，您可以在用户对其进行keydown时自动选择输入，就像这样：

$(".code-input").on("keydown", function(e) {
     $(this).select();
        if ((e.which == 8 || e.which == 46) && $(this).val() == "") {
          $(this)
            .prev("input")
            .focus();
        }
 });

Answer 3

尝试一下... 添加

$('.code-input').focus(
    function(){
        $(this).val('');
    });

$(".code-input").on("keyup", function() {
  if ($(this).val()) {
    $(this)
      .next()
      .focus();
  }
});
$(".code-input").on("keydown", function(e) {
  if ((e.which == 8 || e.which == 46) && $(this).val() == "") {
    $(this)
      .prev("input")
      .focus();
  }
});
$(".code-input").on("paste", function(e) {
  e.preventDefault();
  var text = e.originalEvent.clipboardData.getData("text");
  var textArray = text.split("");

  $(".code-input").each(function(index, element) {
    $(element).val(textArray[index]);
  });
});
$('.code-input').focus(
    function(){
        $(this).val('');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="code-input" maxlength="1" name="verifyCode1">
<input type="text" class="code-input" maxlength="1" name="verifyCode2">
<input type="text" class="code-input" maxlength="1" name="verifyCode3">
<input type="text" class="code-input" maxlength="1" name="verifyCode4">
<input type="text" class="code-input" maxlength="1" name="verifyCode5">
<input type="text" class="code-input" maxlength="1" name="verifyCode6">

jQuery-如何替换键盘输入值？

3 个答案: