第一种:
html
maxlength为限制输入框输入的最长长度,因为我这里对input做了一些空格加入,所以变成13,要是你们不做分隔,写11就行
<input type="text" id="name" maxlength="13" placeholder="请输入手机号码" (keyup)='onPhoneup($event)' (keypress)='onPhonepress($event)' />
ts:
export class XXX {
public phoneNumber: any = '';
//字符分隔
onPhoneup(event) {
let input = event.target;
let value = input.value.replace(/[^0-9]/ig, '');
var arr = value.split('');
if (arr.length >= 4) {
arr.splice(3, 0, ' ');
}
if (arr.length >= 9) {
arr.splice(8, 0, ' ');
}
input.value = arr.join('');
// 输完11位之后
let phone = event.target.value.replace(/\s+/g, '');
this.phoneNumber = phone;
}
onPhonepress(event) {
// 判断是否为数字
let inputStr = String.fromCharCode(event.keyCode);
let re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字
if(!re.test(inputStr)) {
return false;
}
}
}
第二种:
<input type="tel" [(ngModel)]="phoneNumber" maxlength="11" placeholder="请输入手机号" (keypress)='onPhonepress($event)' />
//(ngModelChange)="test($event)" 这个属性可以在用户输入数值时调用一个方法,可以不用onPhonepress,或者onKeyUp了
export class XXX {
public phoneNumber: any = ''; //双向绑定直接就可以获取输入的值了
onPhonepress(event) {
// 判断是否为数字
let inputStr = String.fromCharCode(event.keyCode);
let re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字
if(!re.test(inputStr)) {
return false;
}
}
}