11位的手机号在用户输入时挤在一块，经常出现误删多输等情况，体验非常差。
所以为了解决这样的问题，我们通常将手机号进行分位处理，
处理成
153 8113 77xx
这样的形式
下面仔细分析一下这个实现过程：
1. 首先写一个input标签
<input id="mobilePhone" placeholder="请输入您的手机号" maxlength="13" @keyup="phonenoSpace()">
实现如图所示的一个输入框:
image.png
2. 我们监听keyup事件，绑定一个phonenoSpace()的函数
phonenoSpace(){
let phoneNumber = document.getElementById('mobilePhone')
//获取这个input的DOM元素
let phoneNumberv = phoneNumber.value
//phoneNumberv为输入框中的值
let newNum = 0
//再定义一个中间元素
if(phoneNumberv.length==3 || phoneNumberv.length==8){
newNum = phoneNumberv + ' '
phoneNumber.value = newNum;//加空格后
}
}
只需要判断当输完第三位以及第八位时追加一个空格即可，
到这步为止，我们已经可以实现输入时实现分位的功能：
image.png
但是，当我们删除号码时，问题就来了
我们实现分位的逻辑时判断input中值的长度为3与8时自动追加一个空格。
当我们回删时，删到只剩第8位和第3位，
与此同时，我们写的函数立马又加上一个空格，
我们删掉一个，它又加上一个。
一直反复，除非我们长按退格键，仅触发一次keyup时间，这样子用户体验太差。
3. 在data里写一个全局的spaceflag，初始值为0
当输入号码时，判断值长度与spaceflag的大小
在追加空格后 ，令
this.spaceflag = phoneNumberv.length
只需要phoneNumberv.length<this.spaceflag，此时说明我们在执行删除操作
此时判断在第9位和第4位时自动将空格删除即可
再将 this.spaceflag 置为 phoneNumberv.length
4. 对input中的值进行去空格处理
我们还需要对手机号进行正则判断，
对input中的值进行去空格处理
this.phonennowithoutSpace = phoneNumberv.replace(/\s+/g,"");
在之后的判断中均以phonennowithoutSpace来判断即可。
完整代码如下：
phonenoSpace(){
//输入手机号时实现分位空格
let phoneNumber = document.getElementById('mobilePhone')
let phoneNumberv = phoneNumber.value
let newNum = 0
if(phoneNumberv.length>this.spaceflag){
if(phoneNumberv.length==3 || phoneNumberv.length==8){
newNum = phoneNumberv + ' '
phoneNumber.value = newNum;//加空格后
}
this.spaceflag = phoneNumberv.length
}
else if (phoneNumberv.length<this.spaceflag){
//回删手机号时删除空格
if(phoneNumberv.length==4 || phoneNumberv.length==9){
phoneNumberv = phoneNumberv.substring(0,phoneNumberv.length-1)
newNum = phoneNumberv
phoneNumber.value = newNum;//删除空格后
}
this.spaceflag = phoneNumberv.length
}
this.phonennowithoutSpace = phoneNumberv.replace(/\s+/g,"");//去除空格方法
}
