restrict a character to type in a text box

Question

how we can restrict a character to type in a text box.

Can you be more clear. You mean you want to restrict users from entering some particular characters in a text box is it? — ckv, Jun 17 '10 at 07:13

score 23 · Answer 1 · answered Jun 17 '10 at 07:14

23

You can do this via javascript (so if javascript is off, you won't be able to restrict it)

<input type="text" onkeyup="this.value = this.value.replace(/[^a-z]/, '')" />

This will restrict it to only a-z characters. Checkout regular expressions to see what you can do

answered Jun 17 '10 at 07:14

Ben Rowe

28,406
6
55
75

7

Remember that this code only executes on the client side. The server script must be prepared to handle **any** input and reject invalid characters. – In silico Jun 17 '10 at 07:17
3

This needs a global flag on the regex. This is because one can hold a key down and have it commit many key down events (and add many numbers) before release, at which point only 1 key up event goes...meaning only one of the possibly many non-desired characters would get deleted since without a global flag it only replaces 1 per call. – Jimbo Jonny Feb 20 '16 at 07:09

score 10 · Answer 2 · answered Mar 21 '17 at 13:51

Although still possible, with HTML5 there's no real need to use a JavaScript-based solution for this requirement.

<input type="text" name="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"> will restrict the allowed characters according that RegExp pattern (in this case: valid-looking email addresses).

The title attribute will be used as a warning / notification when the user tries to submit the data not matching the requirement.

<form action="/add_country.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

See the documentation on HTML input element for more information. Not all browsers support it equally well (like Safari) though.

This doesn't restrict the characters you can type, it validates the contents after submission. — Chris Peacock, Nov 01 '21 at 18:03

score 8 · Answer 3 · answered Jun 17 '10 at 07:13

8

If you have the text box then you have to handle the onkeypress event

<input type='text' onkeypress='keypresshandler(event)' />

You can use the following function to restrict the users

    function keypresshandler(event)
    {
         var charCode = event.keyCode;
         //Non-numeric character range
         if (charCode > 31 && (charCode < 48 || charCode > 57))
         return false;
    }

answered Jun 17 '10 at 07:13

Puru

8,913
26
70
91

5

I tried this approach, and found you needed to use onkeypress = 'return keypresshandler(event)' for it to work. – Bill Oct 27 '17 at 21:40

score 3 · Answer 4 · answered Oct 26 '17 at 17:46

Ben Rowe's answer is indeed the way to approach it. However, the character will appear in the textbox before it is being removed. You can prevent that by using oninput instead of onkeyup:

<input type="text" oninput="this.value = this.value.replace(/[^a-z]/, '')" />

score -1 · Answer 5 · answered May 29 '13 at 09:25

-1

   function isNumberKey1(evt)
{
       var charCode = (evt.which) ? evt.which : event.keyCode;
      if ( char!=8(charCode < 65 || charCode > 106))
         return false;

         return true;
}

answered May 29 '13 at 09:25

Raman Singh

151
3
16

1

Please add some description to your code. Why your solution is better then other posted solutions? – Artemix May 29 '13 at 09:43

restrict a character to type in a text box

5 Answers5

Linked