No sé cómo resolver este problema:

El usuario puede comenzar a escribir algunos valores numéricos en los campos de entrada. El cursor se moverá al siguiente campo de entrada, después de escribir un número. Pero no funciona, si el usuario está escribiendo demasiado rápido, eso significa que no hay clave entre dos números.

Por lo tanto, si el usuario escribe "12", en lugar de "1" y "2", debe haber el valor "1" en el primer campo de entrada, el valor "2" en el segundo campo de entrada y se debe establecer el foco. al tercer campo de entrada.

<form>
    <input type="password" maxlength="1" name="pin1" autofocus />
    <input type="password" maxlength="1" name="pin2" />
    <input type="password" maxlength="1" name="pin3" />
    <input type="password" maxlength="1" name="pin4" />
</form>

$('form input').on('keydown', function(event) {        
    if (event.shiftKey || event.which <= 47 || event.which >= 58)
        return false;

}).on('keyup', function (event) {
    if (event.currentTarget.value.length >= 1)
        $(event.currentTarget).next('input').focus();
});

http://jsfiddle.net/bbeg17r8/

6
user3142695 11 dic. 2015 a las 11:56

4 respuestas

La mejor respuesta

¿Has probado con el evento input combinando ambas condiciones y funcionará para múltiples acciones del usuario como key events, cut/paste events etc.

$('form input').on('input keypress', function(event) {     
    if (event.type == "keypress" && (event.shiftKey || event.which <= 47 || event.which >= 58))
        return false;


    if (event.currentTarget.value.length >= 1)
        $(event.currentTarget).next('input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="password" maxlength="1" name="pin1" autofocus />
    <input type="password" maxlength="1" name="pin2" />
    <input type="password" maxlength="1" name="pin3" />
    <input type="password" maxlength="1" name="pin4" />
</form>
2
Jai 11 dic. 2015 a las 09:59

Esto es lo que podría usar para manejar todas las situaciones (puedo pensar):

$("input").on('change keyup paste', function(event) {
  if(event.which === 9) return; // tab pressed, keep default behaviour
  var char = this.value.slice(0, 1);
  if (!/\d/.test(char)) this.value = "";
  else $(this).next('input').focus();
});

-jsFiddle-

(usando entradas de texto para aclararlo)

PD: estoy cansado de que jsFiddle no actualice la correcta. Desde la última actualización importante de jsFiddle, esto realmente me está molestando ...

0
A. Wolff 11 dic. 2015 a las 09:50

Tendrá que ser un poco más sofisticado para manejar esto bien, en particular si el usuario usa pegar para ingresar su PIN (que no debería, pero lo hará).

Quitaría el maxlength y distribuiría el texto a través de las entradas en la entrada. keypress es el mejor evento para lidiar con las pulsaciones de texto reales y, por supuesto, queremos change y input.

Aquí hay una versión aproximada y lista:

$('input').on('keypress input change', function(event) {
    setTimeout(handleInputs, 0);
});
function handleInputs() {
  var focussed = false;
  var inputs = $("input").get();

  // Collect the values
  var text = inputs.reduce(
    function(acc, input) {
      return acc + input.value;
    },
    ""
  );

  // ...adjust `text` here if you want...

  // Distribute the values
  inputs.forEach(function(input, index) {
    input.value = text.charAt(index);
    if (!focussed && !input.value) {
      console.log("Focussing " + this.name);
      input.focus();
      focussed = true;
    }
  });
}

Ejemplo en vivo:

$('input').on('keypress input change', function(event) {
	setTimeout(handleInputs, 0);
});
function handleInputs() {
  var focussed = false;
	var inputs = $("input").get();
	var text = inputs.reduce(
    function(acc, input) {
      return acc + input.value;
    },
    ""
  );
  inputs.forEach(function(input, index) {
    input.value = text.charAt(index);
    if (!focussed && !input.value) {
    console.log("Focussing " + this.name);
    	input.focus();
      focussed = true;
    }
  });
}
<form>
  <input type="password" name="pin1" autofocus />
  <input type="password" name="pin2" />
  <input type="password" name="pin3" />
  <input type="password" name="pin4" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2
T.J. Crowder 11 dic. 2015 a las 09:32

Simplemente puede agregar el código que tiene en el desencadenador de evento keyup en keydown.

$('input').on('keydown', function(event) {   
    if (event.shiftKey || event.which <= 47 || event.which >= 58) {
        return false;
    }
    if (event.currentTarget.value.length >= 1) {
        $(event.currentTarget).next('input').focus();
    }
});

http://jsfiddle.net/bbeg17r8/2/

1
Hartger 11 dic. 2015 a las 09:04