如何在 javascript 的输入字段中只允许字符输入 (az,AZ)？

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 = /^[az]{0,}$/gi.test(evt.target.value); evt.target.parentNode.querySelector(`span`).textContent =?isOk: `Only letters (az or AZ) are allowed`; ``; } }

 .warn { color: red; }

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

Answer 5

Use a html5 pattern and force a native validity check on input event handler. Use the title to get a custom message

 <input type="text" pattern="[a-zA-Z0-9]+" oninput="this.reportValidity()" title="Username should only contain alphanumerical characters.">