Как перейти к следующему полю ввода, если текущее поле содержит значение?

В первом вопросе нет необходимости добавлять обработчик событий для каждого поля ввода, так как это было бы неэффективно.

Вместо этого прослушивайте нажатие клавиши Enter и используйте document.activeElement для определения текущего элемента, на который установлен фокус.

window.onkeypress = function(e) {
    if (e.which == 13) {
       e.preventDefault();
       var nextInput = inputs.get(inputs.index(document.activeElement) + 1);
       if (nextInput) {
          nextInput.focus();
       }
    }
};

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

Чтобы переключить фокус на следующее поле ввода при нажатии клавиши Enter, вам нужно вызвать метод focus() на элементе ввода. Например, если вы используете jQuery, данный код позволит сымитировать поведение клавиши Tab, когда нажимается клавиша Enter:

var inputs = $(':input').keypress(function(e){ 
    if (e.which == 13) {
       e.preventDefault();
       var nextInput = inputs.get(inputs.index(this) + 1);
       if (nextInput) {
          nextInput.focus();
       }
    }
});

В этом коде обрабатывается событие keypress, и если нажата клавиша Enter (код клавиши 13), вызывается preventDefault(), чтобы предотвратить стандартное действие. Затем определяется следующее поле ввода и устанавливается на него фокус. Таким образом, вы можете перейти к следующему элементу формы, не используя клавишу Tab.

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

(Обратите внимание, что в своём коде я использовал a:not(.dropdown-item) вместо просто a в строке allElements, чтобы предотвратить фокусировку на a.dropdown-item.)

function(event){
    // Обратите внимание, что этот код не учитывает tabindex

    event.preventDefault();

    // Изолируем нужный узел
    const currentNode = event.target;

    // Ищем все элементы, доступные для табуляции
    const allElements = document.querySelectorAll('input, button, a, area, object, select, textarea, [contenteditable]');

    // Находим текущий индекс элемента
    const currentIndex = [...allElements].findIndex(el => currentNode.isEqualNode(el));

    // Фокусируем следующий элемент
    const targetIndex = (currentIndex + 1) % allElements.length;
    allElements[targetIndex].focus();
}

Это решение позволяет сделать фокусировку более контролируемой, исключая нежелательные элементы. Надеюсь, что это поможет и вам решить аналогичную задачу!

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

Вот код функции:

function nextField(current) {
    for (let i = 0; i < current.form.elements.length; i++) {
        if (current.form.elements[i].tabIndex - current.tabIndex === 1) {
            current.form.elements[i].focus();
            if (current.form.elements[i].type === "text") {
                current.form.elements[i].select();
            }
            break; // Остановка цикла после переключения фокуса
        }
    }
}

Применение функции может выглядеть следующим образом:

<input type="text" onfocus="nextField(this);" tabIndex="1" />
<input type="text" tabIndex="2" />
    <input type="text" tabIndex="3" />

Обратите внимание на использование атрибута tabIndex для определения порядка переключения фокуса. Важно добавить break в ваш цикл, чтобы избежать переключения фокуса на несколько элементов, если они имеют близкие таб-индексы.

В вашем коде вы пытаетесь сделать так, чтобы при нажатии клавиши "Enter" (keyCode 13) фокус смещался на следующий элемент ввода. Однако, ваш код может привести к ошибкам, если следующий элемент не существует. Вот я предлагаю улучшенную версию вашей функции, чтобы сделать её более безопасной и понятной:

function keydownFunc(event) {
    var keyCode = event.keyCode;        
    if (keyCode === 13) { // Убедитесь, что это клавиша Enter
        event.preventDefault(); // Предотвращаем стандартное поведение

        try {
            var nextInput = event.target.parentElement.nextElementSibling.querySelector('input, textarea, select'); // Находим первый подходящий элемент ввода
            if (nextInput) {
                nextInput.focus(); // Устанавливаем фокус, если элемент найден
            }
        } catch (error) {
            console.error('Произошла ошибка при попытке установить фокус:', error); // Логируем ошибку, если она возникла
        }
    }
}

Объяснение изменений:

1. Использование querySelector: Вместо того чтобы просто брать первый дочерний элемент, мы используем querySelector, чтобы находить только элементы ввода, такие как <input>, <textarea>, или <select>.
2. event.preventDefault(): Мы предотвращаем стандартное поведение клавиши Enter, чтобы избежать неожиданных перезагрузок страницы или других действий.
3. Улучшенная обработка ошибок: Сообщение об ошибках стало более информативным.

Это должно помочь сделать вашу функцию более устойчивой к ошибкам и улучшить взаимодействие с пользователем.