How do next input box does have value on focus

Question

I have 4 input boxes and there is common key down function:

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

I am unable to understand, why there is value appeared on second box as soon as value entered on first one. However I am using $(this).next().val('');

Side-remark: [cache $(this) and $(this).next()](https://stackoverflow.com/a/23743458/1022914). — Mikey, Sep 18 '17 at 17:40
Well you say if it is keydown and it is a number focus the next input than the keypress finishes and the key that is pressed adds the value.... My guess is that logic is flawed — epascarello, Sep 18 '17 at 17:42
@epascarello on keydown once number is input focus goes to next box , from where value is set on next box.If logic is flawed , then what is solution. — Abhinav mukund, Sep 18 '17 at 17:43
The value is going to the one where you set the focus too right? DO you expect the value to go in the one were the keypress started from? — epascarello, Sep 18 '17 at 17:44
@epascarello yes , it is supposed that only those input box sould have value from where key is typed , not on next element. — Abhinav mukund, Sep 18 '17 at 17:47
So than your logic for moving needs to be on keyup, not down — epascarello, Sep 18 '17 at 17:47
@epascarello on keyUp it clears value from prev input box also on backspace. — Abhinav mukund, Sep 18 '17 at 17:49

score 0 · Accepted Answer · answered Sep 18 '17 at 17:52

The problem here is your logic on focus needs to occur on the keyup event, not the keydown event. When the keydown event occurs you move the focus before it has finished so the keypress event is finishing after you move it. So the only way around it is to do the focus logic after the key event is done.

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

How do next input box does have value on focus

1 Answers1