快速解决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操作JSON要领详细总结
Aug 25 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
基于axios 的responseType类型的设置方法
Oct 29 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
js实现随机点名
2021/01/19 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python树莓派红外反射传感器
2019/01/21 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
校本教研工作方案
2014/01/14 职场文书
单位工作证明范文
2014/09/14 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
党纪处分决定书
2015/06/24 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers