好资源导航 » 文章资讯 » 快速解决element的autofocus失效问题

快速解决element的autofocus失效问题

2023-07-17 00:54:03 62

原因：

autofocus是vue中input的原生属性,element也支持这种方法,

但是element中的el-input组件外面还有其他组件,导致autofocus失效,只能手动调用focus方法来聚集。

方法：

绑定ref

this.$refs.myNameId.focus();

动态绑定ref



this.$nextTick(()=>{
letid='input'+this.form.id;
this.$refs[id].focus();
})

补充知识：elementinput输入框自动获取焦点

最近项目中在做表单的时候，需要自动滚动到评论框，并且让评论框自动聚焦，这就需要手动触发输入框的focus状态。

但是，element并不支持autofocus属性，那就只能通过原生的js效果获取聚焦效果了

document.getElementById("input").focus();

或者利用vue的ref属性也可以实现聚焦效果：

原理其实很简单，Element已经提供了focus方法，但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性，然后在需要的地方直接调用方法就可以了

this.$nextTick(()=>{
this.$refs.input.focus()
})

注意：一个页面只能有一个聚焦效果

last,vue也支持自定义指令

当页面加载时，该元素将获得焦点(注意：autofocus在移动版Safari上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

//注册一个全局自定义指令`v-focus`
Vue.directive('focus',{
//当被绑定的元素插入到DOM中时……
inserted:function(el){
//聚焦元素
el.focus()
//element-ui
el.children[0].focus()
//元素有变化，如show或者父元素变化可以加延时或判断
setTimeout(_=>{
el.children[0].focus()
})
}
})

以上这篇快速解决element的autofocus失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

快速解决element的autofocus失效问题

热门推荐

随机推荐