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

【问题标题】：Input type="number" is working fine on Chrome but allowing the characters other than numbers in FirefoxInput type="number" 在 Chrome 上工作正常，但在 Firefox 中允许使用数字以外的字符
【发布时间】：2021-11-24 20:04:14
【问题描述】：

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

【问题讨论】：

标签： angular google-chrome firefox input numbers

【解决方案1】：

在 HTML 中你必须使用 keypress 方法

<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;
    }
}

【讨论】：