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,"");//去除空格方法
}