手机号码输入时隔3位一个空格 再隔4位一个空格的效果

Question

<input type="number" id="number" style="width:200px;height:30px;border:1px solid #ccc"/>

Answer 1

简单写一下，这种类似的问题能搜到很多，多搜一下，应该没必要提问吧~

<input type="text" id="number" maxlength="13" />

document.getElementById("number").onkeyup = function() {
  var text_len = this.value.length;
  if (text_len === 3 || text_len === 8) {
    this.value += " ";
  }
};

Answer 2

先上代码
`

$("#number").keyup(function() {
    if (this.value.length > 10) {
        $(this).val(doFilter(this.value));
    }
});  

function doFilter(value) {
    var temp = [];
    temp[0] = value.slice(0, 3);
    temp[1] = value.slice(3, 7);
    temp[2] = value.slice(7);
    return temp.join(" ");
}

`
然后我想说,你在input中设置了type='number',所以导致我转换完的你想要的那种格式的字符串就默认被干掉了...
至于怎么取舍,你自己弄了,我的实现可能有些笨拙,新手,还望不吝赐教!

Answer 3

<input type="tel">代替type="number"的好处是

1. 能够调出手机端数字键盘（包括安卓和ios）

2. 可以识别非数字输入（包括空格）

然后通过mValue = input.value.replace(/\D/g,'')去掉用户输入的所有空格，

然后再用最笨的办法切割字符串

    if (mValue != '') {
      let mLength = mValue.length;
      if (mLength <= 3) {
        return mValue;
      } else {
        if (mLength <= 7) {
          return mValue.substring(0, 3) + ' ' + mValue.substring(3, mLength)
        } else {
          return mValue.substring(0, 3) + ' ' + mValue.substring(3, 7) + ' ' + mValue.substring(7, 11)
        }
      }
    }
  }

Answer 4

这样会有两个问题：
1、删除时，用户会莫名其妙的感觉到多删除了两个空格，输入时自己并没有输入这两个空格；
2、删除时，遇到空格时就删不了了；

可以监听keyup事件，pc端和移动端都适用。以下代码在输入和删除时都没有问题。

  var phoneNum = this.value.trim();
  //如果是删除按键，则什么都不做
  if (e.keyCode === 8) {
    this.value = phoneNum;
    return;
  }

  var len = phoneNum.length;
  if (len === 3 || len === 8) {
    phoneNum += ' ';
    this.value = phoneNum;
  }