防止输入数字和特殊字符进行输入

Question

I have written a method that captures the entered key through event.

NameValidation(e){

    if(!e.key.match(/^[a-zA-Z]*$/))
    {
        e.key = '';
        console.log(e.key);
    }
},

What this does is basically checks if a user has entered a special character or number and if so replaces the special character/number to an empty string.

The issue starts with e.key = ''; .

As it does not replace the captured key. What am I missing here ?

Answer 1

I realized i was using Keypress event which was delayed in processing the trigger

So instead i used keydown and then used preventDefault to manipulate default event behaviour

This article Helped me How can I prevent numeric inputs using VueJS

Here my Answer

JS

      NameValidation(e){

            if(!e.key.match(/^[a-zA-Z]*$/))
            {
                e.preventDefault();
            }
           
        },

Html

<input v-model.trim="firstname_txt" v-on:keydown="NameValidation($event)">