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

Question

我有一个表单严格使用条形码代码，在读取结束时模拟 Enter 事件。（没有键盘和鼠标）。我很难将焦点发送到下一个元素（有时输入一个按钮）。我为你准备了一个游乐场，这样你就可以检查我的代码。在某个时候，这在类星体装扮之前起作用，但现在却不起作用。我拒绝认为这是一个类星体问题，更像是一个 "I suck" 问题哈哈。

这个过程理论上很简单。在触发焦点事件之前等待输入字段读取整个条形码。我最好的猜测是使用 change 事件。当我尝试输入或按下事件时，它注册了其他内容并在每个数字上触发了其他功能。大禁忌，尤其是在进行 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();
        }
    });
}

和 link 到 codepen。提前致谢

Answer 1

使用 @change（或本机 DOM onchange）事件，任何关联的处理程序都会在您按下键盘上的键时被调用多次，在您的情况下，每次按下一个键时，你实际上是在附加一个新的处理程序（你似乎很擅长 Javascript 和 jQuery，所以我希望代码笔只是为了说明......除非我错过了某物？）。

但无论如何，在 Vue 中（为了这个特定目的），我们通常需要 @keydown.enter。阅读 Event Handling with Key Codes。

也就是说，有几种方法可以实现这种 "jump-to-next-field" 行为，但请考虑以下示例（它也应该适用于 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>

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

Change focus to next input field on "Enter" key with VueJS & Quasar

javascript

vue.js

vuejs2

quasar-framework