javascript - input光标位置错位

问题描述

问 题

在手机端的input输入框通过下面代码将手机号码的格式设置成 000 0000 0000，手机号码中间加入空格。

if (mValue != '') {
      let mLength = mValue.length;
      if (mLength <= 3) {
        return mValue;
      } else {
        if (mLength <= 7) {
          return mValue.substring(0, 3) + ' ' + mValue.substring(3, mLength)
        } else {
          return mValue.substring(0, 3) + ' ' + mValue.substring(3, 7) + ' ' + mValue.substring(7, 11)
        }
      }
    }

亲测正常，但是在华为mate9上面就会出现，每次在输入第三个号码时，在添加空格的时候会显示空格正常加上去了，但是光标在空格的前面，而且再输入数字光标始终在最后一个数字的前面。

解决方案

//通过是否支持createTextRange判断是否是IE
if(this.createTextRange){
    var rg=this.createTextRange();
    rg.collapse(false);
    rg.select();
}else{
    var th=this;
//这里注意一定要定义this为一个变量
//setTimeout才能从变量作用域中得到这个对象
//否则其延迟是由window调用的，this指向的是globle对象。
    setTimeout(function(){
        var len=th.value.length;
        th.setSelectionRange(len,len);
    },20);
}

主要参考以下两个网站

光标_input输入框的光标操作，以及选中方式-textRange.select()方法讲解
JS Range HTML文档/文字内容选中、库及应用介绍

这篇关于javascript - input光标位置错位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！