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; ...
随机推荐
- Java 8 Collectors to Map
1. 介绍 在本教程中,我们将讨论Collectors类的toMap()方法.我们使用它将流收集到一个Map实例中. 对于本教程中涉及的所有示例,我们将使用图书列表作为数据源,并将其转换为不同的Map ...
- linux查看某个时间段的log
若想在linux下查询某个时间段的log,用sed命令示例如下: $ sed -n '/2017-01-04 11:00:00/,/2017-01-04 11:20:55/p' ejabberd.l ...
- 制作FAT12软盘以查看软盘的根目录条目+文件属性+文件内容
[-1]Before for specific info , please visit http://wiki.osdev.org/Loopback_Device [0]我们先上干货,看到效果后,我们 ...
- C语言补漏(1)--- char到int赋值的一个陷阱
作为一个C的新手(虽然学的第一门语言就是C,可是用C实际开发项目却是最近的事情),对使用C过程中遇到的各类问题.疑惑.知识漏洞进行弥补无疑是非常有必要的,于是决定将每次遇到的知识漏洞写到博客上. 今天 ...
- HDU 2473 Junk-Mail Filter(并查集的删除操作)
题目地址:pid=2473">HDU 2473 这题曾经碰到过,没做出来. .如今又做了做,还是没做出来. ... 这题涉及到并查集的删除操作.想到了设一个虚节点,可是我把虚节点设为了 ...
- go module
前言 go 1.5 引进了vendor管理工程依赖包,但是vendor的存放路径是在GOPATH底下,另外每个依赖还可以有自己的vendor,通常会弄得很乱,尽管dep管理工具可以将vendor平级化 ...
- 【BZOJ3771】Triple 生成函数+FFT
[BZOJ3771]Triple Description 我们讲一个悲伤的故事. 从前有一个贫穷的樵夫在河边砍柴. 这时候河里出现了一个水神,夺过了他的斧头,说: “这把斧头,是不是你的?” 樵夫一看 ...
- Mybatis中resultMap的基础配置
一.概述 resultMap 元素是 MyBatis 中最重要最强大的元素.它就是让你远离 90%的需要从结果集中取出数据的 JDBC 代码的那个东西,而且在一些情形下允许你做一些 JDBC 不支持的 ...
- Channel (digital image) 通道 色彩深度 Color_depth
en.wikipedia.org/wiki/Channel_(digital_image) Color digital images are made of pixels, and pixels ar ...
- Grunt 学习笔记【2】---- 配置和创建任务
本文主要讲Grunt任务配置. 说明:本文所有示例都基于Grunt 0.4.5版本. 一 说明 使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如: ...