[Vuejs]-Change focus to next input field on "Enter" key with VueJS & Quasar

by

6👍

✅

With @change (or native DOM onchange) event, any associated handler will get invoked as many times as you hit a key on the keyboard, and in your case, you are literally attaching a new handler every time a key is pressed (you seem to be good with Javascript and jQuery, so I hope the codepen was just for mere illustration… Unless I’m missing something?).

But anyway, in Vue (for this particular purpose), we usually want @keydown.enter. Have a read on Event Handling with Key Codes.

That being said, there are several approaches to achieving this "jump-to-next-field" behavior, but please consider the following example (which should also be applicable to Quasar’s 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>
👤Yom T.

Leave a comment