Restrict user from entering special characters in textbox using javascript

Question

1.00/5 (2 votes)

See more:

i want to restrict user specific characters like # | % i have supplied asci code of those characters but not working

What I have tried:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-size: 9pt;
            font-family: Arial;
        }
    </style>
</head>
<body>
    Alphanumeric value:
    <input type="text" id="text1" />
    <span id="error" style="color: Red; display: none">* Special Characters not allowed</span>
    <script type="text/javascript">
        var specialKeys = new Array();
      
		specialKeys.push(8); //Backspace
        specialKeys.push(9); //Tab
        specialKeys.push(46); //Delete
        specialKeys.push(36); //Home
        specialKeys.push(35); //End
        specialKeys.push(37); //Left
        specialKeys.push(39); //Right
		specialKeys.push(92); //\|
				 
        function IsAlphaNumeric(e) {
            var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
            var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
            document.getElementById("error").style.display = ret ? "none" : "inline";
            return ret;
        }
    </script>
</body>
</html>

Posted 1-Apr-16 0:05am

Rakib Ahmed

Updated 4-Apr-16 18:30pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Add a Solution

Comments

Karthik_Mahalingam 1-Apr-16 6:46am

what is the issue

Rakib Ahmed 1-Apr-16 6:56am

i want to restrict user specific characters like # | % i have supplied asci code of those characters but not working

Karthik_Mahalingam 1-Apr-16 7:05am

little corrections made to your mark up, check my solution.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2016-04-01T15:35:00

A really standard way to block input of a character is the function event.preventDefault:
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault[^].

See also my past answer: how to delete the character typed in key press event[^].

This short manual can also be useful: Keyboard Text Input Filtering: Examples[^].

Be sure to allow backspace, which is also considered as a character with the code point 8.

—SA

Karthik_Mahalingam · Answer 2 · 2016-04-01T01:05:00

Solution 1

try this

HTML

<body>
    <input type="text" onkeypress="return IsAlphaNumeric(event);" id="text1" />
    <b id="error" style="display:none; color:red">Invalid</b>
   

</body>

Posted 1-Apr-16 1:05am

Karthik_Mahalingam

Comments

Rakib Ahmed 1-Apr-16 7:27am

but when i write code for exclude += specialKeys.push(61); //+= is not working but for backspace it is working

Rakib Ahmed 1-Apr-16 7:30am

i mean you see that specialKeys.push(8); //Backspace it is working fine
but when i add specialKeys.push(61)//+= is not working

Karthik_Mahalingam 1-Apr-16 7:40am

+= is a special character right

Rakib Ahmed 1-Apr-16 7:43am

what can i do for this situation?

Karthik_Mahalingam 1-Apr-16 7:45am

need to tune your code.to allow exceptions.

Karthik_Mahalingam 1-Apr-16 7:51am

for + and = the keycode is 43 and 45
specialKeys.push(43);
specialKeys.push(45);

Rakib Ahmed 1-Apr-16 7:54am

bro its says invalid like other special characters but it should work like the backspace

Karthik_Mahalingam 1-Apr-16 7:55am

which browser?

Rakib Ahmed 1-Apr-16 7:58am

mozila

Karthik_Mahalingam 1-Apr-16 8:08am

Find the key code for mozilla

Karthik_Mahalingam 1-Apr-16 8:35am

what error mesage you are getting?
do you have team viewer ?