En Javascript, ¿cómo muevo automáticamente el cursor al siguiente cuadro de texto cuando el actual está lleno?

Question

Supongamos que tengo dos cuadros de texto HTML en mi página web:

<input type='text' id='txt1' maxlength='5' /> 
<input type='text' id='txt2' maxlength='5' /> 

Cada cuadro de texto permite al usuario escribir hasta cinco caracteres. ¿Cómo puedo usar Javascript con o sin jQuery para mover automáticamente el cursor de txt1 a txt2 cuando el usuario escribe cinco charcters en txt1?

Answer 1

una implementación básica sería la siguiente:

$('#txt1').keyup(function() { 
    if(this.value.length == $(this).attr('maxlength')) { 
     $('#txt2').focus(); 
    } 
}); 

Pero hay algunas sutilezas de usabilidad a lo que puede o no se preocupan por. Si considera que lo anterior es insuficiente, hay muchos complementos de jQuery para hacer esto por usted.

Answer 2

La idea es manejar el evento keydown y verificar si se ha alcanzado la longitud máxima; si es así, enfoca el siguiente control.

document.getElementById('txt1').onkeydown = function() { 
    if (this.value.length == this.maxLength) 
    document.getElementById('txt2').focus(); 
} 

Answer 3

Se llama autotabbing, y hay muchos complementos que ya existen para jquery que hacen esto. Solo busca en google.

Si quiere saber cómo hacerlo, enlaza un evento onkeyup a las entradas. Cada vez que se suelta una tecla, asegúrese de que no sea una tecla funcional como "Pestaña" (debe permitir al usuario "Mayús + Tab" o "Pestaña" a la entrada sin que luego se autotabbing al siguiente campo).

Entonces, si la longitud del valor de entrada excede atributo maxlength de la entrada, establecer el foco en la siguiente entrada (en jQuery, $currentInput.next('input').focus()

Answer 4

Se podría utilizar el selector de jQuery UI :focusable mediante la replicación de la clase como esta:.

$.extend($.expr[':'], { 
    focusable: function(element) { 
     var nodeName = element.nodeName.toLowerCase(), 
      tabIndex = $.attr(element, 'tabindex'); 
     return (/input|select|textarea|button|object/.test(nodeName) 
      ? !element.disabled 
      : 'a' == nodeName || 'area' == nodeName 
       ? element.href || !isNaN(tabIndex) 
       : !isNaN(tabIndex)) 
      // the element and all of its ancestors must be visible 
      // the browser may report that the area is hidden 
      && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length; 
    } 
}); 

Entonces usted puede manejarlo así:

$(document).ready(function() { 
    $('input[type=text]').keydown(function() { 
     var $this = $(this), 
      $focusables = $(':focusable'), 
      current = $focusables.index(this), 
      $next; 

     if ($this.val().length == $this.attr('maxlength')) { 
      $next = $focusables.eq(current+1).length ?$focusables.eq(current+1) : $focusables.eq(0); 
       $next.focus(); 
     } 
    }); 
}); 

Véase un ejemplo de trabajo aquí:

http://jsfiddle.net/kU6ZN/

Answer 5

Ninguna de estas soluciones funciona en Javascript recta ... este fragmento es un comienzo:

document.getElementById('txt1').onkeydown = function() { 
    if (this.value.length == this.maxLength) 
    document.getElementById('txt2').focus(); 
} 

Pero una vez que han entrado el número, no puede regresar y editarlo, porque tan pronto como presiona eliminar, salta de regreso a txt2.

Lo único que cambia es hacerlo onkeyup en su lugar. : D

jQuery es programación overkill y perezosa para la gran mayoría de las cosas que se utiliza, y este es un gran ejemplo . A menos que ya lo esté utilizando en la página, es horrible gran parte de la sobrecarga para una tarea tan pequeña.

Answer 6

jQuery plugin:

https://github.com/Mathachew/jquery-autotab

uso más simple:

Añadir autotabbed clase a sus entradas.

$('.autotabbed').autotab();