在实际开发中我们经常会碰到这样的场景,就是有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下光标位置解决方法的更多相关文章

  1. 使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法

    问题:使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法 解决方法:webstrom ->preferences->Laugrange ...

  2. PNG24在ie6下的完美解决方法!(DD_belatedPNG)

    原网址:http://www.zjgsq.com/1629.html 之前写过一篇<js+css滤镜设置解决PNG24在IE6下显示问题> 解决方法不是很完美,使用起来也比较麻烦. DD_ ...

  3. input框自动填充内容背景颜色为黄色解决方法

    谷歌浏览器input自动填充内容,背景色会是黄色,想改的话: input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;} 这种方 ...

  4. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  5. (收集)linux环境下乱码的解决方法

    **************************** 就是从数据库中取出来时,在存入linux的文件里时,在字符流时制定编码格式.代码如下: FileOutputStream fos=new Fi ...

  6. zendstudio快捷键复制行Ctrl+Alt+向下无效的解决方法

    今天不断地在百度输入类似"zendstudio快捷键复制行Ctrl+Alt+向下无效"这样的关键字,里面搜索到的内容都是在说系统的显卡驱动Ctrl+Alt+方向键和ZendStud ...

  7. Linux 客户端 下乱码的解决方法

    最近使用xshell登陆英文版redhat,由于某些文件是中文编码,在xshell下显示乱码.折腾了很久终于找到了解决的方法,希望可以对大家有用.其他语言乱码的话,解决方法和此类似! 首先检查系统的l ...

  8. maven项目无法读取src/main/java目录下的配置文件解决方法

    我们在用Mybatis去操作底层数据库的时候,需要用到xml配置文件,一般我们是把配置文件和dao放置在同一层目录.但是在用idea操作maven项目的时候,我们可能会遇到无法读取到dao对应的map ...

  9. flash滚动图片遮住二级下拉菜单解决方法

    如上图所示,在进行排版时,如果不注意会遇到二级下拉菜单被下边的img图片遮住.此种情况在ie7 8 中出现. 解决方法:给二级下拉菜单添加z-index:9999;position:relative; ...

随机推荐

  1. mini2440裸机试炼之——Uart与pc端实现文件、字符传输

    1.  波特率(Baud rate)即调制速率,1波特即指每秒传输1个符号. 2.  非FIFO模式,即数据传输不利用FIFO缓存,一个字节一个字节地传输. 3.  位能够用来推断发送缓存器中是否为空 ...

  2. POJ 1698 Alice&#39;s Chance(最大流+拆点)

    POJ 1698 Alice's Chance 题目链接 题意:拍n部电影.每部电影要在前w星期完毕,而且一周仅仅有一些天是能够拍的,每部电影有个须要的总时间,问能否拍完电影 思路:源点向每部电影连边 ...

  3. oracle不同用户间访问表不添加用户名(模式)前缀

    默认的情况下,oracle里面的用户A,要访问用户B的表需要带用户B的前缀,如访问用户B的 user表,需要这样访问 select * from B.user;如果想要不添加用户前缀,需要这样处理: ...

  4. 【Unity3D】【NGUI】Atlas的动态创建

    NGUI版本号:3.6.5 1.參见SZUIAtlasMakerRuntimeTest设置对应的值以上值须要提前设置好 2.没有检查是否atlas可以正确创建,自己可以改,增加返回值 3.代码都是在N ...

  5. Boost.Asio c++ 网络编程翻译(11)

    *_at方法 这些方法在一个流上面做随机存取操作.你来指定read和write操作从什么地方開始(offset): async_read_at(stream, offset, buffer [, co ...

  6. 常用yum命令小结

    基于rpm的软件包管理器 yum,是Yellow dog Updater, Modified的简称,是一种软件包管理器.它能够从指定的服务器自动下载RPM包并安装,可以自动处理依赖性关系,并且一次安装 ...

  7. 21-nginx单机1W并发优化

    一:优化思路 (1)建立socket连接 (2)打开文件,并沿socket返回.二:优化  (1) 修改nginx.conf 进程数量 默认是1024 改成20140 worker_rlimit_no ...

  8. CSS -- 未解之疑

    @.css那些事儿 -- 第9章 反馈表单 自己编写了CSS,可是红框中的横线比下面的要粗.对比作者的代码,发现可能与上面标题h3的height和line-height有关,但是不知道具体是为什么? ...

  9. python 基础 1.5 python数据类型(三)--元组

    一.python的数据类型 序列--元组 1.序列 1>字符串,列表,元组都是序列. 2>序列的两个特点是索引操作符和切片操作符 索引操作符:我们可以从序列中抓取一个特定项目 切片操作符: ...

  10. EasyPlayer Android安卓RTSP服务器低延时再优化策略

    EasyPlayer低延迟再优化策略 EasyPlayer是一款专门针对RTSP协议进行过优化的播放器.其中两个我们引以为傲的的优点就是起播快和低延迟.最近我们遇到一些需求,其对延迟要求非常苛刻,于是 ...