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; ...
随机推荐
- 这样好用的ReactiveCocoa,根本停不下来【转载】
前戏我个人非常推崇ReactiveCocoa,它就像中国的太极,太极生两仪,两仪生四象,四象生八卦,八卦生万物.ReactiveCocoa是一个高度抽象的编程框架,它真的很抽象,初看你不知道它是要干嘛 ...
- struts2 文件上传和下载,以及部分源代码解析
struts2 文件上传 和部分源代码解析,以及一般上传原理 (1) 单文件上传 一.简单介绍 Struts2并未提供自己的请求解析器,也就是就Struts2不会自己去处理multipart/form ...
- HTML经典标签用法
1.marquee属性的使用说明 <marquee> ... </marquee>移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等 鼠标属性 onMo ...
- Echache整合Spring缓存实例解说
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要介绍了EhCache,并通过整合Spring给出了一个使用实例. 一.EhCac ...
- Spring MVC获得HttpServletRequest
以下代码是获得Spring MVC中的HttpServletRequest ServletRequestAttributes attr = (ServletRequestAttributes) Req ...
- C++刷题——2736: 指针练习--输出最大值
Description 採用指针法,输出10个整型数中的最大值和最小值 Input 10个整数 Output 最大值和最小值 Sample Input 2 6 3 8 1 5 7 0 4 9 Samp ...
- Linux 进程状态 说明
Linux是一个多用户,多任务的系统,可以同时运行多个用户的多个程序,就必然会产生很多的进程,而每个进程会有不同的状态. 在下文将对进程的 R.S.D.T.Z.X 六种状态做个说明. 进程状态: S ...
- 数据结构与算法之枚举(穷举)法 C++实现
枚举法的本质就是从全部候选答案中去搜索正确的解,使用该算法须要满足两个条件: 1.能够先确定候选答案的数量. 2.候选答案的范围在求解之前必须是一个确定的集合. 枚举是最简单.最基础.也是最没效率的算 ...
- Asp.net MVC3 异常全局过滤器处理
1.建立异常全局过滤器处理机制,在Gloabal.asax.cs文件中,有如下代码块: public static void RegisterGlobalFilters(GlobalFilterCol ...
- 九度OJ 1174:查找第K小数 (排序、查找)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6376 解决:2539 题目描述: 查找一个数组的第K小的数,注意同样大小算一样大. 如 2 1 3 4 5 2 第三小数为3. 输入: ...