Currently, I am tackling an issue in a Vue project where I need to fix a small bug. However, the solution seems quite challenging.
I have managed to make the v-text-field accept only numerical input, which is functioning well.
<v-text-field type="number">
To ensure that only numbers are entered, I have utilized the keydown event and preventDefault method.
<v-text-field type="number" @keydown="testKeydown">
testKeydown(event) {
if(event.key !== "1" && ... && event.key !== "Delete" && event.key !== "Backspace") {
console.log("Wrong Input!!!");
event.preventDefault();
}
}
This implementation successfully prevents exponential characters like 'e', 'E', '+', and '.' from being entered.
However, it fails to block Korean characters (possibly CJK), resulting in 'Process' being returned as the event.key value when Korean characters are inputted. Additionally, 'Wrong Input!!!' is logged in the Chrome console.
Furthermore, although the v-text-field displays '123ㅁ' on the screen, the console logs reveal a value of ' '.
I aim to avoid Korean characters or any CJK characters from being inputted, or instantly remove them upon entry without removing the 'type="number"' attribute.
What steps can be taken to address this challenge?