Lorsque les nombres sont tapés, ils passent automatiquement à l'entrée suivante. Mais comment puis-je le récupérer à l'entrée précédente lorsque je le supprime de l'entrée ?

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>
2
J. Doe 15 mars 2019 à 21:05

2 réponses

Meilleure réponse

Pour une meilleure UX, j'utiliserais une seule entrée et pas de JS du tout

<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>

Sinon, si vous avez besoin du "conception à 6 champs", voici une solution JS un peu meilleure

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>
1
Roko C. Buljan 15 mars 2019 à 19:16

Vous pouvez vérifier quelque chose comme ceci :

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

Pour vérifier si vous êtes dans la première entrée ne faites rien

Voici le violon :

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

0
Ricardo Gonzalez 15 mars 2019 à 18:16