[컴][웹] vuejs 에서 enter 를 칠 때, 다음 input 으로 focus 를 옮기는 법

 

focus 변경 ui / tabindex / 엑셀 처럼 엔터 치면 다음 셀로 옮기는 방법

vuejs 에서 enter 를 칠 때, 다음 input 으로 focus 를 옮기는 법

여기서의 예제는 component 에서 ref 를 제공하지 않을때 방법이다.

결국 여기서는 마땅히 방법이 없었다. 그래서 ref 를 직접 사용하지 못하고, getElementsByTagName를 써서 원래 ref 로 가져오려했던 element 에 접근해야 했다.

this.$refs.myref.$el.getElementsByTagName('input')[0].focus()

<template>
  <div>
    <template v-for="(val, idx) in mydata">
      <MyInput
        :ref="`myinput${idx}`"
        @keypress="onKeyPressInput($event, idx)"
      />
    </template>
  </div>
</template>

...
export {
  ...
  data() {
    return {
      mydata: [0,1,2],
    }
  },
  methods: {
    onKeyPressInput(evt, idx) {
      if(evt.charCode === 13){
        // when pressing the 'Enter' key
        const nextIdx = (idx + 1) % mydata.length
        this.$refs[`myinput${nextIdx}`].$el.getElementsByTagName('input')[0].focus()
      }
    },
  }

Reference

1. Focus management with Vue refs - Learn web development | MDN
2. Component Instance | Vue.js