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()
}
},
}
