IOS上复制粘贴号码到input有空格及input位数限制问题详解

需求说明：
用户手机聚焦input后，弹出数字键盘，可以正常输入11位手机号，也可以从电话本复制电话号然后直接执行粘贴操作。

问题说明：
1.input聚焦时弹出数字键盘，type=number时，安卓正常，ios无效。
2.当input type 为number时，input加maxlength限制长度属性无效。
3.ios上粘贴电话号到input中会有空格，且获取不到数据。

问题解决：
1.因为手机号都是数字，为了方便用户体验，我们会选择input聚焦时，手机上直接弹出数字键盘，此时，input type类型应该为：number，设置此属性后，安卓上能够正常显示数字键盘，但是ios不行，此时，需要再加上一个属性：pattern="\d*"，pattern用于规定输入内容的模式和格式，加上这两个属性，就可以正常弹出数字键盘，但是ios数字键盘上没有小数点。
示例：

2.当用户进行手机号输入时，我们想限制用户输入的位数，这时，可以用到maxlength属性，这一属性规定了输入字段的最大长度。当你兴高采烈的使用了此属性后，心头草泥马瞬间路过，怎么不管用？这时因为当type类型为text或者password时，才可以使用此属性，type为number是使用此属性无效，那么我们该怎么解决呢？可以通过监听input事件，判断value的长度，然后截取输入内容长度，借此达到限制输入内容长度的目的。
vue代码示例：

...
handleInput(e){
	let value = e.target.value + '';
	if(value.length > 11){
		this.mobile = value.slice(0, 11);
	}
}

3.当你兴高采烈的实现了限制输入位数后，突然间，测试发现了个问题：咦，我复制的手机号怎么显示不全了？这时，你可以选择取消限制输入位数，并且等到需要通过接口传递这个值的再把空格去掉，项目经理说：行，就这样，差不多能用就行。你心里松了一口气，终于可以不用再改了，咦，我粘贴的手机号怎么没有传过去，报错了，测试那里又响起了声音，一头草泥马又从你的心头路过。
在ios系统上，当input type为number时，将复制的手机号粘贴到input中时，是拿不到数据的，此时，需要将type改为text，在ios上才能正常执行粘贴操作，因为type=number，复制的手机号是带有空格的字符串，所以才会出现这种问题，但是在安卓上是没有这个问题，安卓上当type为number时，会正常显示没有空格的手机号。
在vue中的解决方案：
初始化页面时先判断是ios还是Android，如果是Android，type设为number，如果是ios，type设为text，这时，依旧保留pattern="\d*"这一属性，这一属性会在type=text时，依旧显示数字键盘，这样就能保证两个平台上都正常显示数字键盘。
在oninput事件中，使用正则匹配空格，并清除空格。

...
handleInput(e){
      let value = e.target.value + '';
      // 如果有空格，去掉空格
      let regSpace = /\s/;
      if(regSpace.test(value)){
        this.mobile = value.replace(/\s+/g, "");
        return;
      }
      // 限制输入位数
      if (value.length > 11) {
        this.mobile = value.slice(0, 11);
      }
    }

有的复制的手机号前面会有带有86，这时候在限制11位的情况下，会截掉后两位，如果有限制位数的需求的话，可以如下处理：

handleInput(e){
      let value = e.target.value + '';
      // 如果开头带有86，直接截取86之后的数字
      let reg = /^(\+86|86)/;
      if (reg.test(value)) {
        this.mobile = value.slice(2);
        return;
      }
      // 如果有空格，去掉空格
      let regSpace = /\s/;
      if(regSpace.test(value)){
        this.mobile = value.replace(/\s+/g, "");
        return;
      }
      // 限制输入位数
      if (value.length > 11) {
        this.mobile = value.slice(0, 11);
      }
    }

以上处理已经基本可以满足咱们的需求，正常输入手机号，并且正常粘贴手机号，且正常显示11位号码。

---

欢迎关注博主：小圣贤君，有问题可以留言哦~