Переключите фокус на следующее поле ввода с помощью клавиши «Enter» с помощью клавиши VueJS и Quasar. - PullRequest
Новая
       27

Переключите фокус на следующее поле ввода с помощью клавиши «Enter» с помощью клавиши VueJS и Quasar.

0 голосов
/ 08 февраля 2020

У меня есть форма, которая работает строго со штрих-кодом, имитирующим событие Enter в конце чтения. (Без клавиатуры и мыши). Мне трудно отправить фокус на следующий элемент (иногда введите кнопку). Я приготовил для вас игровую площадку, чтобы вы могли проверить мой код. В какой-то момент это работало до одевания квазара, а теперь - нет. Я отказываюсь думать, что это проблема квазара и больше похожа на проблему "Я сосу".

В теории этот процесс прост. Подождите, пока поле ввода прочитает весь штрих-код, прежде чем оно запустит событие фокуса. Мое лучшее предположение - использовать событие change. Когда я попробовал событие ввода или нажатия клавиш, он регистрировал другие вещи и запускал другие функции на каждом ди git .. Большое нет-нет, особенно при выполнении вызовов API.

Вот мой метод sendFocus. 

sendFocus: function(e) {
    document.addEventListener("keydown", function(e) {
        var input = e.target.nodeName.toLowerCase() === "input";
        var form = e.target.form;
        if (e.key === "Enter" && input) {
            var index = Array.prototype.indexOf.call(form, e.target);
            form.elements[index + 1].focus();
        }
    });
}

И ссылка на codepen . Заранее спасибо

1 Ответ

2 голосов
/ 08 февраля 2020

С событием @change (или встроенным DOM onchange) любой связанный обработчик будет вызываться столько раз, сколько вы нажимаете клавишу на клавиатуре, и в вашем случае вы буквально присоединяете новый обработчик каждый раз, когда нажата клавиша (кажется, вы хорошо справляетесь с Javascript и jQuery, поэтому я надеюсь, что кодовая ручка была просто для иллюстрации ... Разве я что-то упустил?).

Но в любом случае, в Vue (для этой конкретной цели) мы обычно хотим @keydown.enter. Прочитайте Обработка событий с помощью ключевых кодов .

При этом существует несколько подходов к достижению этого поведения "переход к следующему полю", но, пожалуйста, рассмотрите следующий пример (что также должно применяться к квазарским q-input). 

new Vue({
  el: '#app',

  methods: {
    focusNext(e) {
      const inputs = Array.from(e.target.form.querySelectorAll('input[type="text"]'));
      const index = inputs.indexOf(e.target);

      if (index < inputs.length) {
        inputs[index + 1].focus();
      }
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app">
  <form>
    <div>
      <label>Field #1</label>
      <input type="text" @keydown.enter="focusNext" />
    </div>

    <div>
      <label>Field #2</label>
      <input type="text" @keydown.enter="focusNext" />
    </div>

    <div>
      <label>Field #3</label>
      <input type="text" />
    </div>
  </form>
</div>
...