Hi,
Sometimes, you will meet a scenario where you will just allow the user to input only numbers in a text field in your web page.
Examples are:
1. text field for quantity of a product to be purchased
2. text field for order number.... and more
Although, this can be done in the server-side process, but it's much better to do this in the client side (like checking if the key pressed is a number) for better user-experience. Because doing this in the server side will reload your page back and cost time and process. Doing this in the client side, is more user-friendly, there is an immediate checking, everytime the user presses a key in the keyboard the client javascript will check if that key is a valid number without interrupting the user on what he/she's doing.
To achieve this, we are going to create a JavaScript function then apply it to our text field.
Assumed that we have the following html code(pure html):
<html>
<head>
<title>Numeric Only in Text Input</title>
</head>
<body>
<form>
Enter Number: <input type='text' />
<form>
</body>
</html>
What To Do:
1. Place the following code: inside the head tag of your html
< script type='text/javacript' language='javascript'>
//function for allowing numeric only
function NumericOnly(e)
{
//gets the numeric code of the key pressed
var charCode = (e.which) ? e.which : e.keyCode
//checks if the cod is greater than 31 like the "space" which is 32,
//and it is less than 48 which is "0" or greater than "57" which is 9
//then do not allow it
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;//key pressed is not allowed
return true;//key pressed is allowed
}
</script>
2. Apply the function to the key press event of the text field you want to allow numeric only inputs.
thus:
<input type='text' onkeypress='return NumericOnly(event);' />
Final Output:
<html>
<head>
<script type='text/javascript' language='javascript'>
//function for allowing numeric only
function NumericOnly(e)
{
//gets the numeric code of the key pressed
var charCode = (e.which) ? e.which : e.keyCode
//checks if the cod is greater than 31 like the "space" which is 32,
//and it is less than 48 which is "0" or greater than "57" which is 9
//then do not allow it
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;//key pressed is not allowed
return true;//key pressed is allowed
}
</script>
<title>JavaScript's Numeric Only in Text Input</title>
</head>
<body>
<form>
Enter Number: <input type='text' onkeypress='return NumericOnly(event);' />
</form>
</body>
</html>
The key part in the code is :
if (charCode > 31 && (charCode <> 57))
What it does are:
1. It will disallow input which is not valid, it only allows numeric code less than 31( that includes: backspace, enter, arrow keys, delete key, function keys, tabs,...)
2. It only allows numeric code not less than 48 and not greater than 57, less than 48 codes are ( the symbols or operators like +, -, / *, &......), codes greater than 57 are the (special characters like colon:, semicolon;, <,=,?,{,},~.....) , alpha characters(ABCD....abcd...)
Numbers numeric codes range from 48 - 57.
Visit this website to understand more: http://ascii-table.com/
That's all! Try it now...
Have a nice day.
Jygz
jjygot@gmail.com
No comments:
Post a Comment