<!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获取焦点
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.