Mover un foco cuando el campo de texto de entrada alcanza una longitud máxima

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.Mover un foco cuando el campo de texto de entrada alcanza una longitud máxima

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

Fuente

2009-12-24 TK.

... por supuesto algunos usuarios ** ** voluntad presiona la tecla TAB y la señorita campos fuera. No divida el campo, solo use un solo campo. Hace las cosas mucho más fáciles para los usuarios (y es lo que hace cualquier otro sitio web). – Quentin

No es que todos sean usuarios, pero odio los sitios que hacen esto con números de teléfono, CC y SS. Prefiero sitios que interpretan la próxima pulsación de tecla como ir al siguiente cuadro y escribirlo. En su caso, espere la quinta pulsación de tecla, si es un número, mueva el foco al siguiente cuadro y configure el primer carácter con el número presionado. Si se trata de una tecla con la flecha hacia la derecha, vaya al cuadro siguiente y no configure ningún carácter. Solo mi opinión sobre usabilidad. – jball

Ah, y si el usuario comete un error al ingresar el último carácter en un cuadro dado, probablemente quieran que su tecla de retroceso continúe funcionando. – Quentin

No he usado esta herramienta antes, pero hace lo que quiere. Se podía mirar a su fuente para obtener algunas ideas:

This Plugin on GitHub

Por su situación, deberá añadir 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>

Fuente

2009-12-24 19:03:23 Tauren

Gracias por presentarme un gran plugin. Otros sugirieron el uso de "onchange()", pero no parece funcionar bien. El script que mencionas usa 'keydown()', 'keypress()' y 'keyup()', que parecen ser una mejor solución. –

Yo no lo he probado, pero creo que esta voluntad trabajo. 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(); 
    } 
}

Fuente

2009-12-24 19:06:10

El código no parece funcionar bien. Necesito hacer clic en alguna parte después de completar 4 letras para mover el foco. Pero gracias. Entendí la idea –

Ah, eso es porque solo se llama al cambio cuando se mueve el foco, lo cual es un poco cojo para este ejemplo: -). \, Probablemente necesite enganchar el evento de teclado en su lugar. –

Esto no tiene cuatro campos, pero sí valida las tarjetas de crédito (verificación de integridad, ¡no el algoritmo de Luhn!). Tengo que decirle lo molesto que es usar múltiples campos para un usuario y tabulaciones automáticas. Te recomiendo que solo uses un campo.

De jquery website:

$("#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>

Fuente

2009-12-24 19:08:30

Una solución muy simple podría ir 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>

Fuente

2009-12-24 19:10:39

Gracias. Probé en mis navegadores (Firefox y Safari), pero parece que no funciona. –

He cambiado me.value.length! = This.maxlength a me.value.length! = This.maxLength para hacer que el código funcione, supongo que fue un pequeño error tipográfico – ashofphoenix

@ashofphoenix: ¡así fue, gracias! Corregido en respuesta. –

Como otros 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, utilice su Javascript para insertar automáticamente los espacios donde 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.

Fuente

2009-12-24 20:03:43

+1 - el ajuste automático es lo más molesto al ingresar detalles de la tarjeta de crédito. Especialmente si comete un error y necesita volver atrás – Patrick

Recomiendo usar el plugin 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 usted tendrá el apoyo de copiar y pegar.

Fuente

2013-05-09 19:32:22

Como sugirió @Sander, la manera fácil de hacer una lengüeta de automóviles 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 caso HTML5 es compatible en IE9 + , para que pueda usar keyup en su lugar.

Fuente

2013-06-10 16:01:53 Ouadie

Solo para que todos sepan que incluso si el código anterior funciona bien en FF/Chrome/Safari/Opera (gracias @Ouadie), tuve dificultades para hacerlo trabajar en IE (Doh) incluso en v8. Me las arreglé para hacer que funcione en IE también cambiando la entrada para la tecla. Así que va como: 'jQuery (" entrada de formulario [tipo = texto] ") on ('keyup', función() { \t if (jQuery (this) .val(). Length == jQuery (this) .attr ('maxlength')) { jQuery (this) .next ("input"). focus(); } }); ' – morespace54

' oninput' es ** IE9 + **, es por eso que lo hace no funciona en ** IE8 ** Actualizaré la solución. Gracias;) – Ouadie

Oh, no sabía acerca de IE9 + con la entrada. Gracias. Deseo un día, vivimos en un mundo sin IE ...;) – morespace54

Si sus campos de formulario son uno al lado del otro como en su ejemplo, simplemente puede tomar ventaja de 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)"/>

Fuente

2016-10-24 15:00:16

Mover un foco cuando el campo de texto de entrada alcanza una longitud máxima

Respuesta

Cuestiones relacionadas