Enfoque la siguiente entrada con la tecla de flecha hacia abajo (como con la tecla de tabulación)

Question

Tengo un enorme formulario de entrada y campos para que los usuarios ingresen.

En la ficha de la ficha de usuario del uso del formulario para pasar al siguiente campo, hay algunos campos ocultos y cuadros de texto de solo lectura en el medio cuya tecla de tabulación está deshabilitada usando javascript.

Ahora los usuarios encuentran una tecla de tabulación difícil de usar y desean la misma funcionalidad en la tecla de flecha hacia abajo del teclado.

Estaba usando el siguiente código para invocar el código de la tecla tab en js pero no funciona, por favor, algún cuerpo me ayude en esto.

function handleKeyDownEvent(eventRef) 
{ 
var charCode = (window.event) ? eventRef.keyCode : eventRef.which; 

//alert(charCode); 

// Arrow keys (37:left, 38:up, 39:right, 40:down)... 
if ( (charCode == 40)) 
{ 

    if (window.event) 
    window.event.keyCode = 9; 
    else 
    event.which = 9; 

    return false; 
} 

return true; 
} 

<input type="text" onkeydown=" return handleKeyDownEvent(event);" > 

Answer 1

Usando jQuery, usted puede hacer esto:

$('input, select').keydown(function(e) { 
    if (e.keyCode==40) { 
     $(this).next('input, select').focus(); 
    } 
}); 

Cuando se presiona la tecla de flecha hacia abajo (keyCode 40), la próxima entrada recibe el foco.

DEMO

EDIT:

En vainilla JS, esto podría hacerse así:

function doThing(inputs) {  
    for (var i=0; i<inputs.length; i++) { 
     inputs[i].onkeydown = function(e) { 
      if (e.keyCode==40) { 
       var node = this.nextSibling; 
       while (node) { 
        console.log(node.tagName); 
        if (node.tagName=='INPUT' || node.tagName=='SELECT') { 
         node.focus(); 
         break; 
        } 
        node = node.nextSibling;     
       } 
      } 
     }; 
    }; 
} 
doThing(document.getElementsByTagName('input')); 
doThing(document.getElementsByTagName('select')); 

Tenga en cuenta que usted probablemente desea asignar la tecla de aumento también, y vaya a la primera entrada al último, etc. Le dejo manejar los detalles dependiendo de sus requisitos exactos.

Answer 2

Si he entendido bien, algunos campos son de sólo lectura, por lo que la tecla de tabulación todavía activa ellos, a pesar de que son de sólo lectura, y esto es molesto, ya que hay que pulsar la tecla de tabulación quizá varias veces para llegar al siguiente campo editable. Si eso es correcto, una solución alternativa sería usar el atributo tabindex en sus campos de entrada, indexando cada uno de ellos para que los campos de solo lectura y no editables no sean seleccionados. Puede encontrar más información sobre el atributo tabindex here.

Answer 3

Este es mi código de trabajo final:

$('input[type="text"],textarea').keydown(function(e) { 
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 

    if(key == 40) { 
     e.preventDefault(); 
     var inputs = $(this).parents('form').find(':input[type="text"]:enabled:visible:not("disabled"),textarea'); 

     inputs.eq(inputs.index(this)+ 1).focus(); 
     inputs.eq(inputs.index(this)+ 1).click(); 
    } 
});