javascript - evento - poner el foco en un input jquery
Mover un foco cuando el campo de texto de entrada alcanza una longitud máxima (8)
Como sugirió @Sander, la manera más fácil de hacer una pestaña automática es:
jQuery("form input[type=text]").on(''input'',function () {
if(jQuery(this).val().length == jQuery(this).attr(''maxlength'')) {
jQuery(this).next("input").focus();
}
});
Actualización por @ morespace54
oninput es un evento html5 compatible con IE9 + , por lo que puede usar la función de keyup en keyup lugar.
Tengo un formulario de número de tarjeta de crédito. El número se divide en cuatro partes al igual que en una tarjeta de crédito real.
Quiero agregar un gusto de JavaScript a la forma en que cuando un usuario escribe cuatro letras en un campo, el foco va automáticamente a la siguiente etiqueta. Pero no en la última etiqueta. Al hacer esto, un usuario no tiene que escribir la tecla "tab" para mover un foco.
Está bien agregar alguna clase extra, identificación o nombre en las etiquetas.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>MoveFocus</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
// some code goes here.
});
</script>
</head>
<body>
<form action="post.php" method="post" accept-charset="utf-8">
<input type="text" value="" id="first" size="4" maxlength="4"/> -
<input type="text" value="" id="second" size="4" maxlength="4"/> -
<input type="text" value="" id="third" size="4" maxlength="4"/> -
<input type="text" value="" id="fourth" size="4" maxlength="4"/>
<p><input type="submit" value="Send Credit Card"></p>
</form>
</body>
</html>
Como otros lo han instado, no hagas esto. Los usuarios no podrán anticipar que los tabulará automáticamente, y esto los volverá locos. ¿Has pensado en los usuarios que copian y pegan su tarjeta de crédito? ¿Cuál es el beneficio de usar cuatro campos de todos modos?
Además, no todas las tarjetas de crédito dividen sus números en cuatro conjuntos de cuatro. American Express los divide en tres grupos de números, por ejemplo. La adición y eliminación dinámicas de campos de texto está pidiendo problemas en este caso.
En su lugar, use su Javascript para insertar automáticamente los espacios a los que pertenecen, avanzando el cursor, no el foco. El primer dígito en el número indica el tipo de tarjeta de crédito (5 es Mastercard, 4 es Visa, 3 es American Express ...), por lo que puede leer esto para decidir dónde agregar los espacios. Frote los espacios de la cadena cuando la publique. Este enfoque les ahorrará a usted y a sus usuarios mucho dolor.
Esto no tiene cuatro campos, pero valida las tarjetas de crédito (verificación de integridad, ¡no el algoritmo de Luhn!). Debo decirle cuán molesto es usar múltiples campos para un usuario y tabulaciones automáticas. Te recomiendo que solo uses un campo.
Desde el sitio web de jquery:
$("#myform").validate({
rules: {
field: {
required: true,
creditcard: true
}
}
});
/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
field: {
required: true,
creditcard: true
}
}
});
});
</script>
<style>#field { margin-left: .5em; float: left; }
#field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
br { clear: both; }
input { border: 1px solid black; margin-bottom: .5em; }
input.error { border: 1px solid red; }
label.error {
background: url(''http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif'') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
label.valid {
background: url(''http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif'') no-repeat;
display: block;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<form id="myform">
<label for="field">Required, creditcard (try 446-667-651): </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
No lo he probado, pero creo que esto funcionará. Probablemente también moverá el foco al botón cuando se complete el 4to. Campo.
$("form input").change(function () {
var maxLength = $(this).attr(''maxlength'');
if($(this).val().length == maxLength) {
$(this).next().focus();
}
}
Recomiendo usar el complemento jQuery de entrada enmascarada. http://digitalbush.com/projects/masked-input-plugin/
Su uso se verá así:
$(''#creditCardNumber'').mask("9999-9999-9999-9999");
De esta manera tendrá soporte para copiar y pegar.
Una solución muy simple podría ser así:
<script type="text/javascript">
function input_onchange(me){
if (me.value.length != me.maxlength){
return;
}
var i;
var elements = me.form.elements;
for (i=0, numElements=elements.length; i<numElements; i++) {
if (elements[i]==me){
break;
}
}
elements[i+1].focus();
}
</script>
<form action="post.php" method="post" accept-charset="utf-8">
<input type="text" value="" id="first" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="second" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="third" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<input type="text" value="" id="fourth" size="4" maxlength="4"
onchange="input_onchange(this)"
/> -
<p><input type="submit" value="Send Credit Card"></p>
</form>
No he usado esta herramienta antes, pero hace lo que quieres. Podrías mirar su fuente para obtener algunas ideas:
Para su situación, debería agregar este código:
<script type="text/javascript" src="jquery.autotab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(''#first'').autotab({ target: ''#second'', format: ''numeric'' });
$(''#second'').autotab({ target: ''#third'', format: ''numeric'', previous: ''#first'' });
$(''#third'').autotab({ previous: ''#second'', format: ''numeric'' });
});
</script>
Si los campos de su formulario son uno al lado del otro como en su ejemplo, simplemente puede aprovechar nextElementSibling y voilà!
function skipIfMax(element) {
max = parseInt(element.dataset.max)
if (element.value.length >= max && element.nextElementSibling) {
element.nextElementSibling.focus();
}
}
<input type="text" data-max=2 oninput="skipIfMax(this)"/>
<input type="text" data-max=3 oninput="skipIfMax(this)"/>
<input type="text" data-max=4 oninput="skipIfMax(this)"/>
<input type="text" data-max=5 oninput="skipIfMax(this)"/>