How to accepts only character values in HTML5

Question

Is there any simple way I can use to prevent user from accepting numeric values in html textbox? I've encountered some features of HTML5 like type="email" etc...

Now is there any feature for accepting only character values?

Do you want to prevent user from accepting something or do you want to prevent textbox from accepting input from user? Your question is realy weird... — Gatekeeper, Mar 14 '13 at 14:13
Have a look at this question. They used a jQuery plugin to validate the boxes http://stackoverflow.com/questions/2476378/jquery-validate-plugin-accept-letters-only — Jacob Tomlinson, Mar 14 '13 at 14:15

Jeremy French · Answer 1 · 2023-02-09T10:19:25.700

14

The pattern attribute should allow you to do this.

<input name="test" type="text" pattern="[A-Za-z]+">

Edit Feb 2023 This now has about 98% support according to can I use

edited Feb 09 '23 at 10:19

answered Mar 14 '13 at 14:15

Jeremy French

11,707
6
46
71

`pattern` works on IE 10+, Firefox 4+, Chrome 5+, and Opera 9.6+. Not sure about mobile browsers. – rink.attendant.6 Mar 14 '13 at 14:19

score 4 · Accepted Answer · answered Mar 14 '13 at 14:25

4

I would do like that with jQuery :

JQuery

$("#only-text").on('keyup', function(e) {
    var val = $(this).val();
   if (val.match(/[^a-zA-Z]/g)) {
       $(this).val(val.replace(/[^a-zA-Z]/g, ''));
   }
});

See the working fiddle.

answered Mar 14 '13 at 14:25

soyuka

8,839
3
39
54

I tried this...But how can I use this with my multiple textbox? – PeterS Mar 15 '13 at 08:27
Use a class instead of an ID, for example apply it to `.only-text` and add the class to all your textboxes ! – soyuka Mar 15 '13 at 08:32
just add `\s` in the regex : `/[^a-zA-Z\s]/` – soyuka Mar 15 '13 at 09:37

Gatekeeper · Answer 3 · 2013-03-14T14:23:45.100

If you want to restrict characters that can be typed into your inputs, you will have to use some Javascript to do so, example with jQuery can be found here

With plain JS you could do something like

document.getElementById("alphaonly").onkeypress=function(e){ 
var e=window.event || e 
var keyunicode=e.charCode || e.keyCode 
return (keyunicode>=65 && keyunicode<=122 || keyunicode==8 || keyunicode==32)? true : false 
}

where "alphaonly" is id of your input

score 0 · Answer 4 · answered Feb 03 '23 at 13:09

0

I would do like that with Vanilla JavaScript using oninput attribute:

<input name="test" type="text" oninput="this.value=(this.value.match('[a-zA-Z]+'))">

answered Feb 03 '23 at 13:09

getimad

1
2

How to accepts only character values in HTML5

4 Answers4

Linked