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

Question

[Kripto77]

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

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

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

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

Заранее спасибо

Answer 1

[Alex]

Я бы сделал как-то так

this // текущий input
  .closest('tr')
  .nextElementSibling
  .querySelector('input.find-me-vue')
  .focus()

Но, нужно ещё предусмотреть ряд исключений

Comments

[Kripto77]

Спасибо, рабочий вариант. Думал в прогрессивном фреймворке Vue есть встроенное крутое решение в одну строчку))
Получается простыни кода с перебором по дереву остались

[Alex]

Kripto77, Ну, я такого не знаю. Vue — не Angular. Это не комбайн с предустановленными решениями на любой случай жизни. Тут скорее минимализм, простота и гибкость. А если вам нужно что-то не стандартное вы легко можете использовать любую библиотеку из npm или откуда угодно.

[Kripto77]

Alex, я в хорошем смысле, Vue реально понравился. Раньше не сильно погружался в Javascript из-за сложностей отладки. С Vue dev-tools стало проще.

Answer 2

[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;
                    }
                });
            },

Answer 3

[Aetae]

Если решение нужно универсальное, то правильным будет следовать той же логике что tab.
Например использоват tabbable(или любую иную подобную либу) на корневой form, и отталкиваясь от позиции элемента фокусировать следующий.
Потому что визуально элементы не обязательно следуют в том же порядке, что и в dom, и также не обязательно, что следующим в фокусе должен быть именно следующий по порядку. Для всего этого и придуман tabindex.