快速解决element的autofocus失效问题


Posted in Javascript onSeptember 08, 2020

原因:

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

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

方法:

绑定ref

<el-input ref="myNameId" v-model="form.name" />

this.$refs.myNameId.focus();

动态绑定ref

<el-input :ref=" 'input'+ form.id " v-model="form.name" />

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

补充知识:element input输入框自动获取焦点

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

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

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

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

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

<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>

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失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 #Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 #Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 #Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 #Javascript
基于postman获取动态数据过程详解
Sep 08 #Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 #Javascript
如何区分vue中的v-show 与 v-if
Sep 08 #Javascript
You might like
信用卡效验程序
2006/10/09 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php筛选不存在的图片资源
2015/04/28 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
js中有关IE版本检测
2012/01/04 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
vue生命周期实例小结
2018/08/15 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python中包的用法及安装
2020/02/11 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
护理助产毕业生的求职信
2014/03/02 职场文书
演讲稿格式范文
2014/05/19 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
致青春观后感
2015/06/09 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python