I have a project that involves an input field which should only accept numerical values.
Within the template, I've set up an input element with the value bound to a variable and the input event linked to a function that verifies if the entered value is numeric:
<input
:value="ie"
@input="(evt) => changeIE(evt)"
type="number"
min="0"
/>
In the setup function, I've defined a reference called ie, which stores the actual value inputted. Additionally, the 'changeIE' function has been created. This function retrieves the input text from the event, checks if the last character entered is a number, removes any non-numeric characters, converts the input to an integer, and updates the variable's value accordingly.
const ie = ref('');
const changeIE = (evt) => {
let value = 0;
let input = evt.target.value;
let isnum = /^\d+$/.test(input[input.length - 1]);
if (!isnum) input = input.slice(0, -1);
if (input !== '') value = parseInt(input);
ie.value = value;
};
The issue at hand is that despite verifying and removing non-numeric characters, the input field continues to accept them.