JavaScript Code to Restrict Keyboard Entries
By Stephen Bucaro
You can restrict form textbox input to only the characters you desire. This example
shows how to restrict textbox input characters to only the characters 0 and 1. The
character code for 0 is 48, the character code for 1 is 49. The code shown below
restricts input to those two characters.
var unicode = e.charCode || e.keyCode;
if(unicode != 48 && unicode != 49) return false;
The character code input from the user's keyboard is stored in the variable unicode
and the if statement tests if that code is not equal to 0 and is
not equal to 1, if true, it return a false. A return of false means exit this
section of code without doing anything else. This effectively restricts the input.
We do want to permit certain other key functions besides 0 and 1. For example we want
to allow the character code for backspace (8), tab (9), and delete (46) so that the
user can edit their input. To do that we nest the previous ifstatement in another
if statement that does not allow those keyCodes to be tested by the first
if statement, as shown below.
if(unicode != 8 && unicode != 9 && unicode != 46)
{
if(unicode != 48 && unicode != 49) return false;
}
All this key input restricting prevents the form from responding to the normal Tab
function that allows the user to tab between form elements, which is something that you
probably want to preserve, so before letting program flow get to the statements above,
I use an if statement to catch the character code for tab (13), and use it to
send the focus to the next element in the form. The code for this is shown below.
if(unicode == 13)
{
document.getElementById("result").focus();
}
Shown below is the entire code for a function to restrict the input from a form text
box to only 0 and 1.
<script>
function restrictKey(e)
{
var unicode = e.charCode || e.keyCode;
// cause enter key to tab
if(unicode == 13)
{
document.getElementById("result").focus();
}
// allow tab and backspace key
if(unicode != 8 && unicode != 9 && unicode != 46)
{
if(unicode != 48 && unicode != 49) return false;
}
}
function showEntry(form)
{
alert(form.bindigits.value);
}
</script>
<form action="javascript:return false;">
Binary Number: <input type="text" id="bindigits" size="12" maxLength="12" style="text-align:right" onkeypress="return restrictKey(event)" /><br />
<input type="button" id="result" value="Show" onclick="showEntry(this.form)" />
</form>
You should know enough now to be able to adjust the code for your own purposes. To
aid in that, below is a table of some keys and their related character codes.
Key | keyCode |
Backspace | 8 |
Tab | 9 |
Enter | 13 |
Shift | 16 |
Ctrl | 17 |
Alt | 18 |
Esc | 27 |
Space | 32 |
Page Up | 33 |
Page Down | 34 |
End | 35 |
Home | 36 |
Left arrow | 37 |
Up arrow | 38 |
Right arrow | 39 |
Down arrow | 40 |
PrntScrn | 44 |
Insert | 45 |
Delete | 46 |
0-9 | 48-57 |
A-Z | 65-90 |
More Java Script Code: • Web Site Menus : Which Section Am I In? • Calculators For Your Web Site • Code to Block the Ad Blockers • Debugging JavaScript : Coercions • Easy Code to Sort a Table by Column • Disable IE8 Accelerators on Your Website • JavaScript Variable Scope • How to Shuffle the Deck With Java Script • Easy Animated Banners with Java Script • HTML5 Canvas Drag-and-Drop
|