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();
});
4 respuestas
¿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>
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 ...
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>
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/
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.