用到了正则表达式
<input type="text" [(ngModel)]="number"
onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
/>
此处使用了onkeyup事件,当键盘抬起时触发,事件里面是一个正则表达式,当你输入的数字超过小数点后两位,在你抬起键盘的那一刻,此事件会自动将多输入的数字清空。
但是在提交的时候发现这个功能失效了,虽然在输入的input框里清除掉了内容,但是提交的时候却依然把内容提交上去了。虽然看不见,但是却存在着,这算是onkeyup事件的一个BUG吧
解决方法
以angular为例
<input type="text"
onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
[(ngModel)]="number" (ngModelChange)="number= clean($event)"/>
clean(event: any) {
event = event.match(/\d+(\.\d{0,2})?/) ? event.match(/\d+(\.\d{0,2})?/)[0] : "";
return event;
}
加一个ngModelChange事件(会随着你的输入状态触发),在clean方法里清空多输入的内容,然后在ngModelChange里把整数值赋给当前绑定的对象,此时多输入的内容内容才算真正消失了。