将输入值为非数字的字符替换为空

2024年1月13日 76次阅读 来源: hello_kking

之前做过一个需求，要求只能在input框内输入整数，于是在input框使用

 <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" [(ngModel)]="price" />

此处使用了onkeyup事件，当键盘抬起时触发，事件里面是一个正则表达式，当你输入非数字的字符串时，在你抬起键盘的那一刻，此事件会自动将输入的非数字内容清空。

但是在提交的时候发现这个功能失效了，虽然在输入的input框里清除掉了非数字内容，但是提交的时候却依然把非数字内容提交上去了。虽然看不见，但是却存在着，这算是onkeyup事件的一个BUG吧

解决方法

以angular为例

 <input  type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" 
 [(ngModel)]="price" (ngModelChange)="price = clean($event)"/>

 clean(event: any) { 
    event = event.replace(/\D/g, "");
    return event;
  }

加一个ngModelChange事件(会随着你的输入状态触发)，在clean方法里清空非整数内容，然后在ngModelChange里把整数值赋给当前绑定的对象，此时非数字内容才算真正消失了。

    原文作者：hello_kking
    原文地址: https://blog.csdn.net/qq_42760581/article/details/103958440
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞