快速解决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 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
页面点击小红心js实现代码
May 26 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
微信小程序云开发之云函数详解
May 16 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
php像数组一样存取和修改字符串字符
2014/03/21 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
js运动应用实例解析
2015/12/28 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
vue cli升级webapck4总结
2018/04/04 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
使用graphics.py实现2048小游戏
2015/03/10 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
巴西购物网站:Onofre Agora
2020/06/08 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
日语系毕业生推荐信
2013/11/11 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
生日寿宴答谢词
2014/01/19 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
项目建议书模板
2014/05/12 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
国情备忘录观后感
2015/06/04 职场文书
舞出我人生观后感
2015/06/16 职场文书