Allow only AlphaNumeric character values in TextBox using JavaScript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about the implementation that how to allow only AlphaNumeric character values i.e. Alphabets and Numbers with Space character in TextBox using JavaScript. The script works in such a way that the TextBox will accept only alphabets and numbers only i.e. alphanumeric values with space character, thus unless a special character key has been specified to be excluded it won’t be accepted.
Code for HTML Page
On the HTML page there i will place Textbox control for entering the text (Alphabet or Numeric) by the user. Here I will also place the control named span to show the message or error message. The HTML TextBox has been assigned an OnKeyPress event handler which makes call to a JavaScript function and the OnDrop and OnPaste events which have been cancelled by setting return false.
<input type="text" id="text1" onkeypress="return IsAlphaNumeric(event);" ondrop="return false;" onpaste="return false;" />
<span id="error" style="color: Red; display: none">* Special Characters not allowed.</span>
JavaScript function to allow only AlphaNumeric (Alphabets and Numbers) characters and space in TextBox. On the starting an Array will be created which surplus the ASCII Key Codes of all the allowed Special Characters. For more details on various Keyboard key ASCII code please visit Keyboard Keys and Key Code Values.
In the JavaScript function named check_alphanumeric, first the KeyCode of the pressed Keyboard key is check and then it is matched with the ASCII Key Codes values of
1. Uppercase Alphabets.
2. Lowercase Alphabets.
3. Numbers (Digits).
4. Space character.
5. Special Keys inserted in the Array.
And only if the character matches any of the above then only it is allowed in the TextBox.
<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
function check_alphanumeric(e) {
var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || keyCode == 32 || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>
Here i am giving the complete code for HTML page. You can copy and paste the code on your HTML page and enjoy the execution of the code.
<!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" onkeypress="return IsAlphaNumeric(event);" ondrop="return false;"
onpaste="return false;" />
<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
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) || keyCode == 32 || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>
</body>
</html>
Check the Output of the complete Program
If user enter any special character in the textbox then an error message will be displayed on the screen that is showing in the below Screenshot.
Regards
Using Asp.net
Comments
Post a Comment