vueAntd输入框Input自动聚焦方式
短信预约 -IT技能 免费直播动态提醒
vue Antd 输入框Input自动聚焦
1、从vue的实例属性$ref去调input的focus方法使其实现聚焦。
<a-input type="text ref="ainput" />
<button @click="handleChange"></button>2、点击button自动聚焦，或其他事件需要聚焦
methods:{
handleChange(){
this.$nextTick(()=>{
this.$refs.ainput.focus()
})
}
}vue中输入框聚焦，自动跳转下一个输入框
需求
点击请扫描库位，enter键触发后，跳转到下一输入框，然后自动聚焦另外一个输入框上
<el-input
v-model="posName" clearable size="small" placeholder="请扫描库位" style="width: 200px"
class="filter-item" @keyup.enter.native="jumpInput"
/>
<el-input
ref="barcodeMsg" v-model="barcode" clearable size="small" placeholder="请扫描物料信息"
style="width: 400px" class="filter-item" @keyup.enter.native="getSearch('material')"
/>
// enter键触发
jumpInput() {
this.$refs.barcodeMsg.focus(); // 自动获取焦点
},
如图
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
