Return to the previous Input Javascript

Question

When the numbers are typed, they automatically go to the next input. But how do I get it back to the previous input when I delete it from the input?

JSfiddle

(function() {
  var inputs = $("#passForm input");
  inputs.each(function(i, item) {
    $(item).keyup(function() {
      if ($(this).val().length == $(this).attr('maxlength') && inputs[i + 1]) {
        if (inputs[i + 1]) {
          inputs[i + 1].focus();
        }
      }
    });
  });
}());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" role="form" method="post" id="passForm">
  <input type="text" class="passInput" autofocus name="pass[]" maxLength="1" autocomplete="off" size="1" min="0" max="9" required pattern="[0-9]{1}" />
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" />
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" />
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" />
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="[0-9]{1}" />
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="[0-9]{1}" /><br>
  <button type="submit" class="btn btn-lg btn-primary" style="margin: 30px 0 50px;"> submit
         </button>
</form>

add a similar change handler that will check if the value is empty — Taavi Kivimaa, Mar 15 '19 at 18:08
You're already checking the length. Just add a case for `.length == 0` and replace the `+` with `-` — Andreas, Mar 15 '19 at 18:08
This is a terrible UI. And I mean objectively. If I typo a number and try to go back, the only way to change it would be to paste in the correct value. If I tried to delete it, your wanted logic would move me back to the previous input. As a user **i don't want that** — Taplar, Mar 15 '19 at 18:09
`keyup`? What if one uses copy-paste? Back to the UI / UX drawing board ;) — Roko C. Buljan, Mar 15 '19 at 18:09
Absolutely copy -unfortunately does not work. I don't know how to do that. @RokoC.Buljan — J. Doe, Mar 15 '19 at 18:12
@J.Doe Can you explain why you *need* 6 fields? If you want to check against a 6 digits number you can do that easily with one input alone - and don't mess with crazy focus and stuff - If the design looks like 6 fields, you can replicate that easily with a background and letter-spacing in CSS... — Roko C. Buljan, Mar 15 '19 at 18:13
Because the code only consists of 6 digits. Therefore, there are 6 input . I would like to say you get one inoput :) I searched but could not find this method but I'll investigate how I can do this with CSS. @RokoC.Buljan — J. Doe, Mar 15 '19 at 18:16
You did not answered, Why not one single input that accepts 6 digits. Than on server side you can always split the strings into array... if you need an array... — Roko C. Buljan, Mar 15 '19 at 18:18

Roko C. Buljan · Accepted Answer · 2019-03-15T19:16:25.293

For a better UX I'd use a single input and no JS at all

<form action="" role="form" method="post" id="passForm">
  <input type="text" class="passInput" name="pass" maxLength="6" pattern="\d{6}" autocomplete="off" required autofocus >
  <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
</form>

Otherwise, if you need the "6 fields design" here's a somewhat better JS solution

var $inp = $(".passInput");

$inp.on({
 input: function(ev) {
  if(this.value) {
    $inp.eq($inp.index(this) + 1).focus();
  }
 },
 keydown: function(ev) {
  var i = $inp.index(this);
  if(ev.which===8 && !this.value && i) {
    $inp.eq(i - 1).focus();
  }
 }
});

.passInput {text-align: center;}

<form action="" role="form" method="post" id="passForm">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}" autofocus>
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="\d{1}">
  <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I understand you now Buljan but I like the design in the 6-inputs. I think it looks good. — J. Doe, Mar 15 '19 at 18:36
@J.Doe Added a jQuery example with a better UX given the comments under your question. — Roko C. Buljan, Mar 15 '19 at 19:08
My new [question](https://stackoverflow.com/questions/55189763/how-do-paste-to-multiple-input) — J. Doe, Mar 15 '19 at 19:49

score 0 · Answer 2 · answered Mar 15 '19 at 18:16

You can check something like this:

 if ($(this).val().length == $(this).attr('maxlength') && inputs[i + 1]) {
      if (inputs[i + 1]) {
        inputs[i + 1].focus();
      }
    }

To check if you are in the first input don't do anything

here is the Fiddle:

https://jsfiddle.net/L8yz4se3/14/

Return to the previous Input Javascript

2 Answers2