@Kripto77

Как в динамической таблице по Enter передавать фокус следующему Input?

Доброго времени.
Динамически создаваемые строки в таблице с Input. Пользователь вводит какое-то значение в Input и по @keyup.enter необходимо передавать фокус следующему Input.

Пример таблицы

Подскажите как найти следующий Input по css классу (например .find-me-vue) и передать ему фокус?

Как вариант через $refs последовательно указывая ref следующего input, но это жесткая привязка и в случае удаления одной строчки цепочка нарушится.

Заранее спасибо
  • Вопрос задан
  • 51 просмотр
Решения вопроса 2
Kozack
@Kozack Куратор тега Vue.js
Я бы сделал как-то так
this // текущий input
  .closest('tr')
  .nextElementSibling
  .querySelector('input.find-me-vue')
  .focus()

Но, нужно ещё предусмотреть ряд исключений
Ответ написан
@Kripto77 Автор вопроса
Мое решение по наводке Alex

На каждый нужный input добавлен класс .find-me-for-next-focus и повешено событие @keyup.enter="findNextFocus($event)"

findNextFocus: function(event) {
                let element = event.target;
                ['td', 'tr'].some(function(item, i) {
                    let nextElement = element.closest(item).nextElementSibling;
                    if(nextElement && nextElement.querySelector('.find-me-for-next-focus')) {
                        nextElement.querySelector('.find-me-for-next-focus').focus();
                        return true;
                    }
                });
            },
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Если решение нужно универсальное, то правильным будет следовать той же логике что tab.
Например использоват tabbable(или любую иную подобную либу) на корневой form, и отталкиваясь от позиции элемента фокусировать следующий.
Потому что визуально элементы не обязательно следуют в том же порядке, что и в dom, и также не обязательно, что следующим в фокусе должен быть именно следующий по порядку. Для всего этого и придуман tabindex.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы