Input type="number" 在 Chrome 上工作正常，但在 Firefox 中允许数字以外的字符

Question

我在 Angular 工作，我需要输入一个只接受数字字符的输入。我试过给 type="number"，它在 Google Chrome 中工作得很好，但在 firefox 中，输入仍然接受非数字字符。我已经通过 typescript/ Javascript 解决了这个问题，但想知道是否有更自然的解决方案。任何帮助，将不胜感激。提前致谢！

Answer 1

在HTML中你必须使用按键方法

<input type="text" (keypress)="keyPressNumbers($event)" formControlName="yourformcontrolname" class="form-control"  />

在打字稿中你必须通过

使用这个方法

const keyDecimal : boolean = false; 
             
keyPressNumbers(event) {

var perValue = this.yourformgroupname.get('yourvariablename').value;

var charCode = (event.which) ? event.which : event.keyCode;

if ((perValue.toString().indexOf(".") == -1) || (Number.isInteger(perValue)) || (perValue == null)) {

       this.keyDecimal = false;

     }

if (charCode< 45 || charCode> 57) {
       event.preventDefault();
       return false;
    } 

else {
       if (charCode == 46 && !this.keyDecimal) {
        this.keyDecimal = true;
    }
else if ((charCode == 46 && this.keyDecimal) || (charCode == 47)) {
         event.preventDefault();
        return false;
    }
       return true;
    }
}

Input type="number" 在 Chrome 上工作正常，但在 Firefox 中允许数字以外的字符

Input type="number" is working fine on Chrome but allowing the characters other than numbers in Firefox

firefox

numbers

google-chrome

input

angular