I have a function that allows me only numbers by using a regular expression, the validation works fine in a desktop web browser but when I open the app on an android device with chrome, the validation breaks and allows typing any letters and symbols

I am using Angular and here is my function:

onlyNumber (event: KeyboardEvent) {
    let regex = /^\d*$/;
    const input = String.fromCharCode(event.key.charCodeAt(0));
    if (!regex.test(input)) {
      event.preventDefault();
    }
}

or number and letter only

 onlyNumberAndLetters = (event: KeyboardEvent) {
    let regex = /^[a-zA-Z0-9]*$/;
    const input = String.fromCharCode(event.key.charCodeAt(0));
    if (!regex.test(input)) {
      event.preventDefault();
    }
}

using

   <input type="text" class="form-control" minlength="8" maxlength="15"  formControlName="secretNumber"  (keypress)="onlyNumber($event)">

   <input type="text" class="form-control" minlength="5" maxlength="25"  formControlName="secretNumber2"  (keypress)="onlyNumberAndLetters($event)">

PD: I am using a text type field, because it was the easiest way to achieve the minlength and maxlength rule.