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数字键盘上没有小数点。
示例：

<input type="number“ pattern="\d*" />

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

<input type="number“ pattern="\d*" @input="handleInput" />
...
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事件中，使用正则匹配空格，并清除空格。

<input :type="inputType" pattern="\d*" name="mobile" v-model.trim="mobile" @input="handleInput" placeholder="输入对方手机号" />
...
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位号码。

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

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

解决iOS模拟器“复制/粘贴“无法互通的问题
经常遇到从Mac复制之后到ios模拟器上无法粘贴的情况: 解决方案 iOS模拟器–>Edit–>Automatically Sync Pasteboard 选中就可以, 如果不生效, 先取 ...
小妙招，在禁止复制粘贴的网页上复制粘贴内容
小妙招,在禁止复制的网页上复制内容有些时候,有些网页,是吧你懂的,想复制或者粘贴东西都不让复制粘贴.虽然有一些现有的插件啥的下载了能够解决,但是不同的网页如果都要下载插件岂不是有点麻烦. 教程先f ...
复制/粘贴丢失换行符或者空格
例如:原文:1.123456789 2.123456789 3.123456789 复制粘贴过后变成:1.1234567892.1234567893.123456789 经过多次测试发现可能为Note ...
在android中执行多个动画,Android上几种Animation和多个动画同时播放以ScaleAnimation应用详解...
在API Demo的View->Animation下可以找到四个Animation的Demo,第一个3D Translate比较复杂,最后再讲,先讲第2个Interpolator.该Activi ...
python中返回上一步操作的代码_Pycharm代码跳转后退回操作详解
用Pycharm写Python代码有一段时间了,最近发现了一个Pycharm的一个小技巧想分享给大家,下面这篇文章主要给大家介绍了关于Pycharm代码跳转该如何回退的相关资料,文中介绍的非常详细,对 ...
ios navigation的返回按钮长按_Android Jetpack架构组件 — Navigation入坑详解 [转]
前言这是最近看见的觉得比较有意思的文,希望对大家的学习有帮助. Navigation 直接翻译即为导航,它是 Android Jetpack 组件之一,让单 Activity 应用成为首选架构.应用 ...
使用cmd上传指定文件到ftp服务器,命令行下的FTP使用详解
命令行下的FTP使用详解更新时间:2011年11月08日 11:59:51 作者: 今天新到一台服务器,需要做一些环境配置拷入一些备份数据,在这台服务器上装FlashFxp又觉得麻烦,所以干脆用 ...
linux find文件,并复制,通过find命令寻找文件并拷贝到一个指定目录方法详解
有这样的一个需求,需要将一部分符合条件的文件从一个目录拷贝到另一个目录中,可以通过使用find命令从源目录查找到符合条件的文件然后使用cp命令拷贝到目标目录将通过find命令找到的文件拷贝到一个新的 ...
flutter 全选_Flutter ios 国际化(复制粘贴中英文切换等问题)
前提在做flutter ios 国际化的时候遇到长按文本框崩溃的问题,然后google到一堆写法是重写cupertinoLocalization的奇怪做法,然后还千篇一律都是这么改的,其实不用那么麻 ...

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

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

最新文章

热门文章