el-input回车事件下一个input获取焦点

el-input回车事件的时候下一个input获取焦点

//el-input
<div class="box">
//focusNext后面的属性和下一个input里面的ref相对应，虽然写的麻烦但是效果可以实现
<el-input label="200" v-model="list.parentId" @keyup.native.enter="focusNext('materielGroupNo')">
</el-input>
</div>
<div class="box">
<el-input label="200" v-model="list.materielGroupNo"
ref="materielGroupNo" >
</el-input>
</div>

 focusNext(nextRef) {
this.$refs[nextRef].focus()
},

//input
<input label="200" v-model="list.materielGroupNo"
ref="materielGroupNo" @keyup.native="focusNext()">
<input label="200" v-model="list.materielGroupNo"
ref="materielGroupNo" @keyup.native="focusNext()">

 focusNext() {
const DOM = event.target
const nextDOM = DOM.nextElementSibling
nextDOM.focus()
},

input的回车事件触发是@keyup.native

el-input的回车事件触发是@keyup.native.enter

补充
可以通过jq设置全局事件

document.onkeydown = function (e) {
let code = e.charCode || e.keyCode;
if (code == 13) {
$.each($('.el-input__inner'), function () {
if (!$(this).val()) {
$("input").blur();
$(this).focus()
return false;
}
});
}
}
//.el-input__inner是你页面的input的class
//input是我的标签
$("input").blur();是我触发了自己写的表单验证

最后

以上就是烂漫面包为你收集整理的el-input回车事件下一个input获取焦点的全部内容，希望文章能够帮你解决el-input回车事件下一个input获取焦点所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。