javascript - tag - title of page html

Enfocar la siguiente entrada una vez que alcance el valor de longitud máxima

Question

¿Cómo puedo enfocar la siguiente entrada una vez que la entrada anterior haya alcanzado su valor de longitud máxima?

a: <input type="text" maxlength="5" />
b: <input type="text" maxlength="5" />
c: <input type="text" maxlength="5" />

Si un usuario pega texto que es mayor que la longitud máxima, lo ideal es que se derrame en la siguiente entrada.

jsFiddle: http://jsfiddle.net/4m5fg/1/

Debo enfatizar que no quiero usar un complemento, ya que prefiero aprender la lógica detrás de esto, que usar algo que ya existe. Gracias por entender.

Answer 1

La respuesta verificada tiene un problema que enfoca el campo anterior si el campo anterior tiene una longitud válida

He modificado la respuesta anterior para corregir la longitud completa de la etiqueta anterior

var container = document.getElementsByClassName("container")[0];
    container.onkeyup = function(e) {
    var target = e.srcElement || e.target;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
                break;
            if (next.tagName.toLowerCase() === "input") {
                next.focus();
                break;
            }
        }
    }
    // Move to previous field if empty (user pressed backspace)
    else if (myLength === 0) {
         var previous = target;
       // Move to previous field if backspace is pressed
        if (code == 8) {
            previous = previous.previousElementSibling;
            if (previous != null) {
                if (previous.tagName.toLowerCase() === "input") {
                    previous.focus();
                }
            }
        } else {
            while (previous = previous.previousElementSibling) {
                if (previous == null)
                    break;
                if (previous.tagName.toLowerCase() === "input") {
                    var mLength = parseInt(previous.attributes["maxlength"].value, 10);
                    var pMyLength = previous.value.length;
                    // Move to previous field if it does not have required length
                    if (mLength == pMyLength) {
                        break;
                    } else {
                        previous.focus();
                        break;
                    }
                }
            }
        }
    }
}

Answer 2

No se utiliza jQuery y es una implementación muy limpia:

• Lee desde el atributo maxlength.
• Escala a cualquier número de entradas dentro de su contenedor.
• Encuentra automáticamente la siguiente entrada para enfocar.
• No jQuery.

http://jsfiddle.net/4m5fg/5/

<div class="container">
a: <input type="text" maxlength="5" />
b: <input type="text" maxlength="5" />
c: <input type="text" maxlength="5" />
</div>

..

var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
    var target = e.srcElement || e.target;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
                break;
            if (next.tagName.toLowerCase() === "input") {
                next.focus();
                break;
            }
        }
    }
    // Move to previous field if empty (user pressed backspace)
    else if (myLength === 0) {
        var previous = target;
        while (previous = previous.previousElementSibling) {
            if (previous == null)
                break;
            if (previous.tagName.toLowerCase() === "input") {
                previous.focus();
                break;
            }
        }
    }
}

Answer 3

Puedes usar JavaScript plano:

Ver DEMO .

Compruebe la longitud del carácter con el.value.length . Si es igual al valor máximo, muévase al siguiente campo usando focus() . Vincule esta función al evento keyup con onkeyup para que la función se active cada vez que las teclas de usuario estén en un carácter.

var a = document.getElementById("a"),
    b = document.getElementById("b"),
    c = document.getElementById("c");

a.onkeyup = function() {
    if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
        b.focus();
    }
}

b.onkeyup = function() {
    if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
        c.focus();
    }
}

Answer 4

Puedes ver la entrada en los campos y probar su valor:

$("input").bind("input", function() {
    var $this = $(this);
    setTimeout(function() {
        if ( $this.val().length >= parseInt($this.attr("maxlength"),10) )
            $this.next("input").focus();
    },0);
});

Demo de trabajo .

El setTimeout está allí para garantizar que el código solo se ejecutará después de que se complete la entrada y se actualice el valor. La input encuadernación garantiza que la mayoría de los tipos de entrada desencadenarán el evento, incluidas las pulsaciones de teclas, copiar / pegar (incluso desde el mouse) y arrastrar y soltar (aunque en este caso, esta última no funcionará, ya que el enfoque estaba en el elemento que el droppable).

Nota : en algunos navegadores más antiguos, es posible que también deba enlazar propertychange .

Si un usuario pega texto que es mayor que la longitud máxima, lo ideal es que se derrame en la siguiente entrada.

Para hacerlo, es posible que necesite eliminar el atributo maxlength mediante JavaScript (para poder capturar la entrada completa) e implementar esa funcionalidad usted mismo. Hice un pequeño ejemplo , partes relevantes a continuación:

$("input").each(function() {
    var $this = $(this);
    $(this).data("maxlength", $this.prop("maxlength"));
    $(this).removeAttr("maxlength");
})

Esto elimina el atributo, pero lo guarda en data , para que pueda acceder a él más tarde.

function spill($this, val) {
    var maxlength = $this.data("maxlength");
    if ( val.length >= maxlength ) {
        $this.val(val.substring(0, maxlength));
        var next = $this.next("input").focus();
        spill(next, val.substring(maxlength));
    }
    else
        $this.val(val);
}

Aquí, la lógica de longitud máxima se reintroduce en JavaScript, así como también se obtiene la parte "descartada" y se utiliza en una llamada recursiva a spill . Si no hay un elemento siguiente, la llamada a data volverá undefined y el bucle se detendrá, por lo que la entrada se truncará en el último campo.

Answer 5

Si está agregando campos de texto de entrada dinámicamente, puede intentar esto.

Esto volverá a inyectar la secuencia de comandos en el DOM y funciona perfectamente.

$(''body'').on(''keyup'', ''#num_1'',function(){
  if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
    $(''#num_2'').focus();
  }
})
$(''body'').on(''keyup'',''#num_2'', function(){
   if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
    $(''#num_3'').focus();
  }
})

<input type="text" class="form-control" name="number" maxlength="3" id="num_1">
<input type="text" class="form-control" name="number" maxlength="3" id="num_2">
<input type="text" class="form-control" name="number" maxlength="4" id="num_3">

Answer 6

Si está enfocado en crear el tipo de entrada del número de tarjeta (débito / crédito). Luego limpie una versión jQuery fácilmente manejable de la siguiente manera:

/*..............................................................................................
* jQuery function for Credit card number input group
......................................................................................................*/
            // make container label of input groups, responsible
            $(''.card-box'').on(''focus'', function(e){
                $(this).parent().addClass(''focus-form-control'');
            });
            $(''.card-box'').on(''blur'', function(e){
                $(this).parent().removeClass(''focus-form-control'');
            });
            $(''.card-box-1'').on(''keyup'', function(e){
                e.preventDefault();
                var max_length = parseInt($(this).attr(''maxLength''));
                var _length = parseInt($(this).val().length);
                if(_length >= max_length) {
                    $(''.card-box-2'').focus().removeAttr(''readonly'');
                    $(this).attr(''readonly'', ''readonly'');
                }
                if(_length <= 0){
                    return;
                }
            });
            $(''.card-box-2'').on(''keyup'', function(e){
                e.preventDefault();
                var max_length = parseInt($(this).attr(''maxLength''));
                var _length = parseInt($(this).val().length);
                if(_length >= max_length) {
                    $(''.card-box-3'').focus().removeAttr(''readonly'');
                    $(this).attr(''readonly'', ''readonly'');
                }
                if(_length <= 0){
                    $(''.card-box-1'').focus().removeAttr(''readonly'');
                    $(this).attr(''readonly'', ''readonly'');
                }
            });
             $(''.card-box-3'').on(''keyup'', function(e){
                e.preventDefault();
                var max_length = parseInt($(this).attr(''maxLength''));
                var _length = parseInt($(this).val().length);
                if(_length >= max_length) {
                    $(''.card-box-4'').focus().removeAttr(''readonly'');
                    $(this).attr(''readonly'', ''readonly'');
                }
                if(_length <= 0){
                    $(''.card-box-2'').focus().removeAttr(''readonly'');
                    $(this).attr(''readonly'', ''readonly'');
                }
            });
            $(''.card-box-4'').on(''keyup'', function(e){
                e.preventDefault();
                var max_length = parseInt($(this).attr(''maxLength''));
                var _length = parseInt($(this).val().length);
                if(_length >= max_length) {
                    return;
                }
                if(_length <= 0){
                    $(''.card-box-3'').focus().removeAttr(''readonly'');
                    $(this).attr(''readonly'', ''readonly'');
                }
            });
/*..............................................................................................
* End jQuery function for Credit card number input group
......................................................................................................*/

/* Hide HTML5 Up and Down arrows. */
                                input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
                                    -webkit-appearance: none; margin: 0;
                                }
                                input[type="number"] { -moz-appearance: textfield; }
                                .card-box {
                                    width: 20%; display: inline-block; height: 100%; border: none;
                                }
                                
                                .focus-form-control {
                                    border-color: #66afe9; outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
                                        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
                                }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-control" style="padding: 0; max-width: 300px; ">
                                        <input class="card-box card-box-1" type="number" id="CreditCard_CardNumber1" required step="1" minlength="4" maxlength="4" pattern="[0-9]{4}" value="" placeholder="0000"
                                            onClick="this.setSelectionRange(0, this.value.length)" oninput="this.value=this.value.slice(0,this.maxLength||'''');this.value=(this.value < 1) ? ('''') : this.value;"/> 
                                        <input class="card-box card-box-2" type="number" id="CreditCard_CardNumber2" readonly required step="1" minlength="4" maxlength="4" pattern="[0-9]{4}" value="" placeholder="0000"
                                            onClick="this.setSelectionRange(0, this.value.length)" oninput="this.value=this.value.slice(0,this.maxLength||'''');this.value=(this.value < 1) ? ('''') : this.value;" />
                                        <input class="card-box card-box-3" type="number" id="CreditCard_CardNumber3" readonly required step="1" minlength="4" maxlength="4" pattern="[0-9]{4}" value="" placeholder="0000"
                                            onClick="this.setSelectionRange(0, this.value.length)" oninput="this.value=this.value.slice(0,this.maxLength||'''');this.value=(this.value < 1) ? ('''') : this.value;" />
                                        <input class="card-box card-box-4" type="number" id="CreditCard_CardNumber4" readonly required step="1" minlength="4" maxlength="4" pattern="[0-9]{4}" value="" placeholder="0000"
                                            onClick="this.setSelectionRange(0, this.value.length)" oninput="this.value=this.value.slice(0,this.maxLength||'''');this.value=(this.value < 1) ? ('''') : this.value;" />
                                    </div>

Answer 7

Si vas a tener muchos campos puedes hacer algo como esto.

básicamente en keyup obtenga la longitud de la entrada y luego compárela con la longitud máxima, si concuerda, luego focus en el siguiente campo de entrada.

http://jsfiddle.net/btevfik/DVxDA/

$(document).ready(function(){
    $(''input'').keyup(function(){
        if(this.value.length==$(this).attr("maxlength")){
            $(this).next().focus();
        }
    });
});

Answer 8

El código btevfik actualizado, Onkeyup o onkeydown creará problemas en la navegación por pestañas. Será difícil editar o cambiar el texto dentro del cuadro de entrada, ya que estará limitado a la longitud máxima. Así que podemos usar el evento oninput para lograr la tarea.

DEMO

HTML

<ul>
<li>a: <input type="text" maxlength="5" /></li>
<li>b: <input type="text" maxlength="3" /></li>
<li>c: <input type="text" maxlength="5" /></li>
<li>d: <input type="text" maxlength="3" /></li>
<li>e: <input type="text" maxlength="6" /></li>
<li>f: <input type="text" maxlength="10" /></li>
<li>g: <input type="text" maxlength="7" /></li>
</ul>

Javascript

$(document).ready(function(){
    $(''input'').on("input", function(){
        if($(this).val().length==$(this).attr("maxlength")){
            $(this).next().focus();
        }
    });
});

CSS

ul {list-style-type:none;}
li {padding:5px 5px;}