How do I allow only character input (a-z,A-Z) in my input field in javascript?

Question

I want to be able to type only alphabets in my input field, not numbers. I've tried this code but it doesn't work:

document.getElementById("input").addEventListener("keypress",function(event){
        return (event.code=="KeyA"||event.code=="KeyB"||event.code=="KeyC"||event.code=="KeyD"||
        event.code=="KeyE"||event.code=="KeyF"||event.code=="KeyG"||event.code=="KeyH"||event.code=="KeyI"||
        event.code=="KeyJ"||event.code=="KeyK"||event.code=="KeyL"||event.code=="KeyM"||event.code=="KeyN"||
        event.code=="KeyO"||event.code=="KeyP"||event.code=="KeyQ"||event.code=="KeyR"||event.code=="KeyS"||
        event.code=="KeyT"||event.code=="KeyU"||event.code=="KeyV"||event.code=="KeyW"||event.code=="KeyX"||
        event.code=="KeyY"||event.code=="KeyZ");         
      })

Please help me.

Answer 1

Simplest way to do that is to use HTML pattern Attribute

For example:

<input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">

Or with key events

Answer 2

Using event.preventDefault() method can prevent running default task of events. Just check if event.key is not in your allowed list, run event.preventDefault(). In following code I used event.key.toLowerCase() that cause accepting both d and D.

document.getElementById("input").addEventListener("keypress",function(event){
    if("abcdefghijklmnopqrstuvwxyz".indexOf(event.key.toLowerCase()) < 0)
        event.preventDefault();
})

<input id="input" type="text">

Answer 3

You can try this way

<input type="text" name="name" id="event" onkeypress="return alphabhets(event);" />

function alphabhets(event) {
  const key = event.keyCode;
  return /[a-z]/i.test(event.key);
};

Answer 4

Like @Ali Demirci said, you can use the pattern attribute. Alternatively you can give a message while the user is typing.

For the record: client side form checking is never sufficient if the values should also be processed server side. In that case, the server side processing should always include a (re)check of the values.

document.addEventListener(`keyup`, handle);

function handle(evt) {
  if (evt.target.id="demo") {
    const isOk = /^[a-z]{0,}$/gi.test(evt.target.value);
    evt.target.parentNode.querySelector(`span`).textContent = 
      !isOk ? `Only letters (a-z or A-Z) are allowed` : ``;
  }
}

.warn {
  color: red;
}

<div><input type="text" id="demo"> <span class="warn"></span></div>