快速解决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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js转义字符介绍
Nov 05 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
Python 模板引擎的注入问题分析
2017/01/01 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
租房协议书样本
2014/08/20 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
党课培训心得体会
2014/09/02 职场文书
出国留学英文自荐信
2015/03/25 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android