Сфокусируйте следующий вход с помощью клавиши со стрелкой вниз (как с клавишей табуляции)

У меня есть огромная форма ввода и поля для ввода пользователей.

В форме пользовательский ключ табуляции, чтобы перейти к следующей feild, есть некоторые скрытые поля и текстовые поля только для чтения, между которыми отключен ключ вкладки с помощью javascript.

Теперь пользователи с трудом могут использовать ключ табуляции и хотят использовать ту же функциональность клавишей со стрелкой вниз клавиатуры.

Я использовал приведенный ниже код, чтобы вызывать вкладку key code на js, но не работает, пожалуйста, помогите мне в этом.

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);" >

Ответ 1

Используя jQuery, вы можете сделать это:

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

Когда вы нажимаете клавишу со стрелкой вниз (keyCode 40), следующий вход получает фокус.

DEMO

EDIT:

В Vanilla JS это можно сделать следующим образом:

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'));

Обратите внимание, что вы, вероятно, захотите также нарисовать ключ вверх и перейти к первому входу, и т.д. Я разрешаю вам обрабатывать детали в зависимости от ваших точных требований.

Ответ 2

Это мой последний рабочий код:

$('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();
    }
});

Ответ 3

Если я правильно понимаю, некоторые поля доступны только для чтения, поэтому ключ табуляции все еще активирует их, даже если они доступны только для чтения, и это раздражает, так как вам нужно нажать клавишу вкладки, возможно, несколько раз, чтобы добраться до следующее редактируемое поле. Если это правильно, альтернативным решением было бы использовать атрибут tabindex в ваших входных полях, индексируя каждый так, чтобы поля, доступные только для чтения и иначе не редактируемые, не были выбраны. Вы можете найти дополнительную информацию об атрибуте tabindex здесь.