jquery和vue分別對input輸入框手機號碼格式化（344）

jQuery

function fomatterTel(val, old) {//val: 當前input的值，old: input上次的值
var str = "";
var telLen = val.length;
if (old.length <= telLen) {
if (telLen === 4 || telLen === 9) {
var pre = val.substring(0, telLen-1);

//substring() 方法用於提取字符串中介於兩個指定下標之間的字符。

//stringObject.substring(start,stop)

//start必需。一個非負的整數，規定要提取的子串的第一個字符在 stringObject 中的位置。

//可選。一個非負的整數，比要提取的子串的最后一個字符在 stringObject 中的位置多 1。

如果省略該參數，那么返回的子串會一直到字符串的結尾

var last = val.substr(telLen-1, 1);

//substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。

//stringObject.substr(start,length)

//start必需。要抽取的子串的起始下標。必須是數值。如果是負數，那么該參數聲明從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最后一個字符，-2 指倒數第二個字符，以此類推。

//length可選。子串中的字符數。必須是數值。如果省略了該參數，那么返回從 stringObject 的開始位置到結尾的字串

//返回值：一個新的字符串，包含從 stringObject 的 start（包括 start 所指的字符） 處開始的 length 個字符。如果沒有指定 length，那么返回的字符串包含從 start 到 stringObject 的結尾的字符。

//注釋：substr() 的參數指定的是子串的開始位置和長度，因此它可以替代 substring() 和 slice() 來使用。

str = pre + ' ' + last;
} else {
str = val;
}
} else {
if (telLen === 9 || telLen === 4) {
str = val.trim();

//trim() 函數用於去除字符串兩端的空白字符
} else {
str = val;
}
}
return str;
}

1.input的輸入事件最好用oninput事件監聽，用keyup的話會有閃爍，不過看不太出來，也能用。jquery的input事件要用bind綁定，不能直接寫$("#input1").input這樣寫會報錯, 要寫成$("#input1").bind('input', function(){});

2.old的獲取也很簡單

var oldTelephone = $("#telephone").val();//輸入前先獲取一次
$("#telphone").bind('input',function () {
$("#telephone").val(fomatterTel($("#telephone").val(), oldTelephone));
oldTelephone = $("#telephone").val();//輸入后保存old為下一次輸入做准備
});

 vue獲取

data中存入telephone: ''。input的v-model為telephone 。在watch中監聽telephone

<input v-model='telephone'>


data () {
    return {
        telephone: ''
    }
},
watch: {
    telephone (newValue, oldValue) {
if (newValue > oldValue) {
if (newValue.length === 4 || newValue.length === 9) {
var pre = newValue.substring(0, newValue.length - 1);
var last = newValue.substr(newValue.length - 1, 1);
this.telephone = pre + ' ' + last;
} else {
this.telephone = newValue;
}
} else {
if (newValue.length === 9 || newValue.length === 4) {
this.telephone = this.telephone.trim();
} else {
this.telephone = newValue;
}
}
}
}