使用 VueJS 和 Quasar 将焦点更改为“Enter”键上的下一个输入字段

Question

我有一个与条形码严格配合的表单，它在读取结束时模拟 Enter 事件。（没有键盘和鼠标）。我很难将焦点发送到下一个元素（有时输入按钮）。我为你准备了一个游乐场，这样你就可以查看我的代码。在某些时候，这在类星体装扮之前是有效的，但现在不行了。我拒绝认为这是一个类星体问题，而更像是一个“我很糟糕”的问题，哈哈。

该过程理论上很简单。等待输入字段读取整个条形码，然后再触发焦点事件。我最好的猜测是使用更改事件。当我尝试输入或 keydown 事件时，它注册了其他内容并在每个数字上触发了其他功能。大禁忌，尤其是在进行 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的链接。提前致谢

Answer 1

使用@change（或本机 DOM onchange）事件，任何关联的处理程序都会在您按下键盘上的按键时被调用多次，并且在您的情况下，每次按下按键时，您实际上都会附加一个新的处理程序（您似乎很好使用 Javascript 和 jQuery，所以我希望 codepen 只是为了说明......除非我遗漏了一些东西？）。

但无论如何，在 Vue 中（出于这个特定目的），我们通常想要@keydown.enter. 阅读有关使用键代码进行事件处理的内容。

话虽这么说，有几种方法可以实现这种“跳转到下一个字段”行为，但请考虑以下示例（它也应该适用于 Quasar 的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>