TroyGrosfield.com TroyGrosfield.com

Headline

Preventing Character Input Using Javascript

Author
by Troy Grosfield
Date
December 1st, 2010
Category
Developer
Story

The objective here is to prevent a user from typing a specific character in a textbox. This can be accomplished with only a few lines of Javascript.

Html

Here we create a simple form with a single textbox:

<form action="#">
   <input type="text" />
</form>

Javascript

Now we add the Javascript to prevent characters from being typed into the textbox:

$('input[type="text"]').keydown(function(e){
   var ingnore_key_codes = [8,32];
   if ($.inArray(e.keyCode, ingnore_key_codes) >= 0){
      e.preventDefault();
   }
});

The ignore_key_codes array is the list of key code values I want to ignore.  You want to place the code on the keydown event so you can prevent the character(s) from ever being typed in the textbox.  Key code 8 is the delete button and 32 is the space character.

You can check to see if the values are in an array using the inArray jQuery function. It will return -1 if the item is not found in the array:

$.inArray(e.keyCode, ingnore_key_codes);

If the key code is in the array of key codes to ignore, you can prevent the default event from happening using the following line:

e.preventDefault();

This will prevent the event’s default behavior.

Key Codes

Keyboard Key Pressed Key Code Value
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
space 32
page up 33
page down 34
end 35
home 36
arrow left 37
arrow up 38
arrow right 39
arrow down 40
print screen 44
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
open bracket 219
back slash 220
close bracket 221
single quote 222
Tags
Comments
2 Comments »

2 Comments

Leave a reply

 
  1. Author
    swqweqwe
    Date
    December 12th, 2011 at 4:13 am
    Comment

    thank you

  2. Author
    Pharmk936
    Date
    March 15th, 2011 at 12:19 am
    Comment

    Very nice site!