<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in inputs">
<input type="text" v-model="item.val" v-focus="focusIndex === index" @keyup.enter="nextFocus(index)">
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el,obj) { //這是需要頁面剛加載就能進行聚焦操作使用的鉤子函數,可以省略的，視具體需求而定
//console.log(obj);
if(obj.value) { //對值進行判斷
// 聚焦元素
el.focus()
}
},
// 當指令所在組件的 VNode 及其子 VNode 全部更新後調用
componentUpdated: function(el,obj) { //這是每當綁定的值發生改變時觸發的鉤子函數
//console.log(obj); //可以打印看一下
if(obj.value) {
el.focus()
}
}
})
new Vue({
el: "#app",
data() {
return {
focusIndex: 0, //用來存放下一個應該聚焦的index值
inputs: [{
val: 1
},{
val: 2
},{
val: 3
},{
val: 4
}]
}
},
methods: {
nextFocus(index) {
return this.focusIndex = index + 1;
}
}
});
</script>
</body>
</html>
Vue表單回車事件下一個input獲取焦點
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.