fastclick.js?fe3c:331 Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElem

报错信息

出错过程

• 移动端项目，一个比较常见的需求，一个手机号的输入框，要求：

1. 只能输入数字
2. 限制长度为11位
3. 手机号格式

• 下面是开始时，我的做法：

<input type="number" placeholder="请输入手机号" v-model="phone" class="phone-input" @input="limitLength">

// 限制输入长度
 limitLength() {
   if (this.phone.length > 11) {
     this.phone = this.phone.slice(0, 11)
   }
 },

// 验证手机号格式
 var reg = /^0?1[3|4|5|6|7|8][0-9]\d{8}$/
  if (this.phone === '' || !reg.test(this.phone)) {
    return Toast('您的手机号输入有误！')
  }

因为当 input type = “number” 时，input 的maxlength 属性会失效，所以我使用了 input 事件通过 js 来控制输入的字符长度。
这看起来没有问题，但是因为移动端项目使用了 FastClick 插件，当 input 一获得焦点，便会出现上面那个报错！

分析解决

既然是 FastClick 的问题，那不妨试试修改下它的源码
在 node_module 里找到 fastclick.js ，第 329 行；

if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
	length = targetElement.value.length;
	targetElement.setSelectionRange(length, length);
} else {
	targetElement.focus();
}

修改为：

var useSelectionRange = deviceIsIOS;
if(useSelectionRange){
     try{
         length = targetElement.value.length;
         targetElement.setSelectionRange(length, length);
     }catch(error){
         useSelectionRange = false;
     }
 }
 if (!useSelectionRange) {
     targetElement.focus();
 }

问题得到解决。

如果这篇文章对你有帮助的话，请给个赞吧，谢谢 ^_^~