下一个输入框如何具有焦点价值

Question

我有4个输入框，并且有常用的按键功能：

$(".pincode-input-text").keydown(function(e) {
  if($(this).val()=="") {
    $(this).attr('type','number');
  } else if($(this).val()!="") {
    $(this).attr('type','password');
  }

  // check if input is numeric
  var enteredValue = e.key;

  if ($.isNumeric(enteredValue)) {
    $(this).val(enteredValue);
    $(this).next().attr('type', 'number');
    $(this).next().focus();
    $(this).next().val('');

    $('.fn-mtd_pin_validate').nextAll('span:first').html(" ");
  } else if(!$.isNumeric(enteredValue)) {
    // check if input is non numeric
    $(this).val('');

    if(e.keyCode == 8 || e.key == "Backspace") {
      $(this).prev().focus();
      var elemt = new mtdMobilePin($(window.pinvalidateElemnt).attr('id'));
      elemt.validate();
      return false;
    }

    $(this).focus();
    $('.fn-mtd_pin_validate').nextAll('span:first').html("Invalid Characters");
    $('.fn-mtd_pin_validate').nextAll('span:first').show();
  }

  // Update the value of input type password after value change on any input type.
  var elemt = new mtdMobilePin($(window.pinvalidateElemnt).attr('id'));
  elemt.validate();
});

<span class="fn-mtd_pin_validate">
  <input type="password" min="0" step="1" maxlength="1" autocomplete="off" class="form-control pincode-input-text first mtd_pin_first" tabindex="30">
  <input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text second mtd_pin_second" tabindex="31">
  <input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text third mtd_pin_third" tabindex="32">
  <input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text fourth mtd_pin_fourth" tabindex="33">
</span>

我不明白，为什么在第一个框中输入值后第二个框中就会出现值。 但是我正在使用$(this).next().val('');

Answer 1

这里的问题是您关注焦点的逻辑需要发生在keyup事件而不是keydown事件上。 当keydown事件发生时，您将焦点移到焦点尚未结束的位置，因此keypress事件在移到焦点后即结束。 因此，解决此问题的唯一方法是在完成键事件之后执行焦点逻辑。

$(".pincode-input-text").on("keydown", function(e) {
  //backspace logic
}).on("keyup", function(e) {
  //number logic
})