First of all: This issue does not occur on any other browser, except Google Chrome for Android (90.0.4430.210).
We have an input that looks like this. Only numerics should be entered. Our Input looks something like this.
<b-form-input
v-model="manualInput"
class="text-center text-primary bold font-weight-bold"
id="manInput"
type="number"
inputMode="numeric"
pattern="[0-9]*"
min="1"
max="20"
@keypress="checkValidation($event)"
@keyup="checkValidation($event)"
@mouseup="checkValidation($event)"
@paste="onPaste($event)"
/>
(The "onPaste" event is not important, it basically prevents the user from pasting any content)
private checkValidation(evt) {
console.log(this.manualInput);
//Check if there is an input
if (this.manualInput.length) {
//At least one number
var stamps: number = +this.manualInput;
//Check if the input is valid (just in case)
if (stamps < this.min || stamps > this.max || !this.manualInput.match("[0-9]{1,3}")) {
//Input is invalid
this.showAlert = true;
this.isValid = false;
} else {
//Input is valid
this.showAlert = false;
this.isValid = true;
}
} else {
//No content
this.showAlert = false;
this.isValid = false;
}
}
As I already said, this works perfectly on all desktop browsers, firefox (mobile) and safari (mobile). But on android, it is possible to enter commas and dots!
Now for the weird part: I tried to replace the commas and dots with this.manualInput.replace(".", "").replace(",", "") in the first line of the function. BUT, the input string is still empty, when you enter just a comma. When I print the string in the console, it prints an empty string, even though I entered a comma. As soon as I enter a number, the comma appears in the console. This is obviously bad for the user, since it appears, that he can enter a comma. I would be very glad if somebody knows why this happens and how I can prevent it.