element el-input 自动获取焦点和IE下光标位置解决方法
在实际开发中我们经常会碰到这样的场景,就是有input的地方都喜欢切换过去input自动获取焦点。
如果这个问题是在input中,很容易就实现了,但是element里面的el-input看源码,其实不只是一个input,所以aotofocus 这个属性便不生效了。
解决方法网上也有不同的例子,比如vue的自定义指令,当然包括全局和组件的,但是我建议一种比较简单的写法:
this.$nextTick(() => {
this.$refs.input.$el.querySelector('input').focus()
}) 因为有的时候input中是有默认值的,自动获取焦点谷歌和火狐、360浏览器光标都正常。但是在IE上光标就跑到默认值的最左边去了,、
查了下好像IE浏览器下input的光标默认就是在最左边的,很显然这不符合我们的需求,每次输入的时候用户还要多点一次。
我们想要的肯定是
我觉得比较严谨的做法就是先判断浏览器,判断IE浏览器的方法很多,这里就不写多种了,有兴趣自己上网查
// el-input 获得焦点事件 @focus="getCursor" getCursor (event) {
// 判断是不是IE浏览器
if (window.ActiveXObject || 'ActiveXObject' in window) {
// 把光标移动input默认值的最后
event.target.setSelectionRange(this.position.length, this.position.length)
}
}
element el-input 自动获取焦点和IE下光标位置解决方法的更多相关文章
- 使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法
问题:使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法 解决方法:webstrom ->preferences->Laugrange ...
- PNG24在ie6下的完美解决方法!(DD_belatedPNG)
原网址:http://www.zjgsq.com/1629.html 之前写过一篇<js+css滤镜设置解决PNG24在IE6下显示问题> 解决方法不是很完美,使用起来也比较麻烦. DD_ ...
- input框自动填充内容背景颜色为黄色解决方法
谷歌浏览器input自动填充内容,背景色会是黄色,想改的话: input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;} 这种方 ...
- css控制div下图片自适应解决方法:图片不超过最大宽度
我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...
- (收集)linux环境下乱码的解决方法
**************************** 就是从数据库中取出来时,在存入linux的文件里时,在字符流时制定编码格式.代码如下: FileOutputStream fos=new Fi ...
- zendstudio快捷键复制行Ctrl+Alt+向下无效的解决方法
今天不断地在百度输入类似"zendstudio快捷键复制行Ctrl+Alt+向下无效"这样的关键字,里面搜索到的内容都是在说系统的显卡驱动Ctrl+Alt+方向键和ZendStud ...
- Linux 客户端 下乱码的解决方法
最近使用xshell登陆英文版redhat,由于某些文件是中文编码,在xshell下显示乱码.折腾了很久终于找到了解决的方法,希望可以对大家有用.其他语言乱码的话,解决方法和此类似! 首先检查系统的l ...
- maven项目无法读取src/main/java目录下的配置文件解决方法
我们在用Mybatis去操作底层数据库的时候,需要用到xml配置文件,一般我们是把配置文件和dao放置在同一层目录.但是在用idea操作maven项目的时候,我们可能会遇到无法读取到dao对应的map ...
- flash滚动图片遮住二级下拉菜单解决方法
如上图所示,在进行排版时,如果不注意会遇到二级下拉菜单被下边的img图片遮住.此种情况在ie7 8 中出现. 解决方法:给二级下拉菜单添加z-index:9999;position:relative; ...
随机推荐
- springboot+async异步接口实现和调用
什么是异步调用? 异步调用是相对于同步调用而言的,同步调用是指程序按预定顺序一步步执行,每一步必须等到上一步执行完后才能执行,异步调用则无需等待上一步程序执行完即可执行. 如何实现异步调用? 多线程, ...
- freemark2pdf
freemarker+ITextRenderer 生成html转pdf 博客分类: ITextRenderer ITextRenderer 网上已经有比较多的例子 写这个 但是很多都是简单的 dem ...
- Chrome禁用NPAPI插件(包含 Silverlight、Java 和 Unity)
过去,很多插件都是使用一种称为NPAPI 的旧系统开发的. 现在,仅仅有少量站点在使用NPAPI 插件,由于这些插件有时会给站点带来安全风险. 为了让用户获得更安全.更高速且更稳定的 Chrome 浏 ...
- css3动画学习资料整理
现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...
- 触发器 (Delete Update)
--delete触发器IF(EXISTS(SELECT * FROM sysobjects WHERE name='T_PlanQtyDelete'))DROP TRIGGER T_PlanQtyDe ...
- 解决:IOS viewDidAppear/viewWillAppear无法被调用
本文转载至 http://my.oschina.net/lvlove/blog/82264 原因: 苹果的文档是这样描述的: If the view belonging to a view con ...
- SAM4E单片机之旅——13、LCD之ASF初步
在Atmel Studio 6中,集成了Atmel Software Framework(ASF框架).通过它提供的库,可以很快速地完成新的项目. 这次的最终目标使用ASF在LCD上显示出文字“Hel ...
- 淘宝(新浪)API获取IP地址位置信息
package com.parse; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IO ...
- JavaScript演示如何访问Search字段
<!DOCTYPE html> <html> <body> <h3>演示如何访问Search字段</h3> <input type=& ...
- BCH分叉是一次站队博弈
BCH分叉在即,很多人说BCH本次分叉实质是大佬间的斗争,主要是本次BCH分叉主要分为两大派别: 一派以BCH用户量最大的客户端Bitcoin ABC开发组为主,要在11月15日展开硬分叉升级,主要升 ...