• 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)
    }
    }
     
  • 相关阅读:
    Codeforces 712B. Memory and Trident
    Codeforces 712A. Memory and Crow
    kkb --- webpack实战
    前端性能优化
    前端防抖
    css面试题
    七、服务端渲染 ---kkb
    数据结构与算法(位运算)
    数据结构与算法(栈、队列、链表)
    vue-cli 配置项以及请求的封装
  • 原文地址:https://www.cnblogs.com/alvin553819/p/9669612.html
Copyright © 2020-2023  润新知