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; ...
随机推荐
- Content Security Policy
资料来源:阮一峰博客 一.背景 XSS最常见,危害最大的网页安全漏洞,“网页安全政策”从根本上解决问题 二.简介 CSP的实质是白名单制度,明确告诉客户端那些外部资源可以加载和执行. CSP 大大增强 ...
- VS中单元测试用法
using System; using Microsoft.VisualStudio.TestTools.UnitTesting; namespace UnitTestProject1 { [Test ...
- sed: -e expression #1, unknown option to `s'解决办法
报错如下: sed: -e expression #1, char 13: unknown option to `s' 需要替换的行为: monitor.url=http://192.168.25.1 ...
- Go开发常见陷阱
Go作为一种简便灵巧的语言,深受开发者的喜爱.但对于初学者来说,要想轻松驾驭它,还得做好细节学习工作. 初学者应该注意的地方: 大括号不能独立成行. 未使用变量错误——对于全局变量和函数参数变量,是可 ...
- ABAP 弹出框 函数
POPUP_GET_VALUES_USER_HELP 是一个和用户交互信息的函数,用户能够填写信息,并且我们还能够依据实际的需求对弹出框进行F1 F4 以及用户的需求进行增强.具体的实现能够參考系统标 ...
- windows 10 python 2.7和python3.6共存解决方法和pip安装
一.首先去python官网将两个版本下载并安装: 然后进入windows的环境变量,检查下面4个变量: 1.C:\Python272.C:\Python27\Scripts3.D:\software\ ...
- CentOS6.5安装MySQL5.6 过程记录
刚开始,还不太懂,直接上了MySQL5.7版本的二进制安装,结果遇到了各种问题,从5.6到5.7还是做了很大改变的,比如mysql_install_db的文件位置变更到了/bin文件下等等,觉得现在用 ...
- WebApi 传参详解(转)
一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中 ...
- Django项目高频使用文件
数据库配置: MySQL数据库 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'HOST': 'localhost' ...
- EF学习和使用(三)Code First
Code First模式我们称之为"代码优先"模式.从某种角度来看.其实"Code First"和"Model First"区别并非太明显. ...