代码之家 › 专栏 › 技术社区 › Kyle Underhill

如何替换keyup上的输入值?

jquery javascript

Kyle Underhill · 技术社区 · 7 年前

如果我输入一些数字,然后选择第一个数字 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">

3 回复 | 直到 7 年前

inki 7 年前

我建议使用相同的事件,而不是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">

Katie.Sun 7 年前

如果你在用户集中注意力时自动选择框中的文本,那么他们下一步输入的内容都将替换其中的内容。尝试将此事件添加到代码中:

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

Sooriya Dasanayake 7 年前

$('.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">