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;
}
}
}
}