angular、ionic、文本框只允許輸入數字或幾位小數的數字

如果需求只是要求只允許輸入數字，那么：

HTML5方案:

<input type="number" />

ionic組件方案:

<ion-input [(ngModel)]="input_value" type="number"></ion-input>

 

如果需求是可以輸入小數，但最多N位，那么：

*.html:

<ion-input [(ngModel)]="input_value" type="text"  (ionChange)="checkInput($event)"></ion-input>

*.ts

  checkInput(event) {
    let input_value = event.target.value;//獲取input的id
    var reg = /^\d+\.?(\d{1,4})?$/; //匹配正則
    while (input_value !='' && !reg.test(input_value)) {
      input_value = this.checkStr(input_value)
    }
    this.input_value = input_value;
    event.target.value = input_value;
  }

  //檢查是否符合金額格式:只能輸入數字且最多保留小數
  private checkStr(str) {
    if (str.split('.').length > 2) {
      str = str.substring(0,str.lastIndexOf('.'));
    }else{
      str = str.substring(0, str.length - 1);
    }
    return str;
  }