By pressing the backspace key, delete the previous input fields

Question

By pressing the backspace key, delete the previous input fields

Navigation

#1 by (1 votes)

1

The code below causes the user to type in a particular input field, it jumps to the other field automatically:

<form class="form-inline">
 <div align="center">    
  <div class="form-group">
      <input type="password" class="form-control" style="width: 70px" maxlength="1" id="campo1" value="" onkeyup="if(this.value.length >= 1) { campo2.focus(); }">
  </div>
  <div class="form-group">
      <input type="password" class="form-control" style="width: 70px" maxlength="1" id="campo2" value="" onkeyup="if(this.value.length >= 1) { campo3.focus(); }">
  </div>
   <div class="form-group">
      <input type="password" class="form-control" style="width: 70px" maxlength="1" id="campo3" value="" onkeyup="if(this.value.length >= 1) { campo4.focus(); }">
  </div>
  <button type="submit" id="campo7" class="btn btn-default">Acessar</button>
 </div> 
</form>

So far, all right, but how would I do if the user wanted to delete the previous fields by pressing the Backspace key?

Thank you

javascript jquery html5

asked by anonymous 29.07.2017 / 16:18

1 answer

How to save a foreign key in laravel 5.3? Error making an insert in sql server with c # [closed]

score 1 · Accepted Answer

I find it simpler to do all the logic directly in javascript, building all the functions of onkeyup simultaneously through a for .

//apanhar todos os inputs
let inputs = document.querySelectorAll(".form-inline input");

//ou especificando cada um individualmente
//let inputs = [
//  document.getElementById("campo1"), 
//  document.getElementById("campo2"), 
//  document.getElementById("campo3") ];

for (let i = 0; i < inputs.length; ++i){
  inputs[i].onkeyup=function(evento){ //construir o onkey para cada um

    if (evento.key == "Backspace"){ //se for backspace estamos a apagar
      if (i > 0 && this.value.length == 0){ //se não for o 1º e se tiver vazio
        inputs[i-1].focus();
      }
    }
    else if ((i+1) < inputs.length && this.value.length >= 1){ //se não for o ultimo e tiver 1 caracter
      inputs[i+1].focus();
    }
  }
}

<form class="form-inline">
 <div align="center">    
  <div class="form-group">
      <input type="password" class="form-control" style="width: 70px" maxlength="1" id="campo1" value="">
  </div>
  <div class="form-group">
      <input type="password" class="form-control" style="width: 70px" maxlength="1" id="campo2" value="">
  </div>
   <div class="form-group">
      <input type="password" class="form-control" style="width: 70px" maxlength="1" id="campo3" value="">
  </div>
  <button type="submit" id="campo7" class="btn btn-default">Acessar</button>
 </div> 
</form>