zoukankan      html  css  js  c++  java
  • 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)
    }
    }
     
  • 相关阅读:
    CentOS8下升级Python3.6到3.9
    web service基础知识
    mysql+centos7+主从复制
    saltstack高效运维
    Docker
    python如何配置virtualenv
    Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy
    nginx+uWSGI+django+virtualenv+supervisor发布web服务器
    RabbitMQ消息队列-Centos7下安装RabbitMQ3.6.1
    flask-wtforms
  • 原文地址:https://www.cnblogs.com/alvin553819/p/9669612.html
Copyright © 2011-2022 走看看