Working With the Keyboard in Java Script
By Stephen Bucaro
Using Java Script you can determine which keyboard key the user pressed. You
can use this information to block certain keys, to replace a key's character,
or to perform an action based upon a specific key being pressed. In this article,
I'll provide some basic code for working with the keyboard.
The Internet Explorer and Firefox browsers use slightly different syntax to
capture keyboard events. If you want to determine which key the user pressed
when the mouse pointer was anywhere inside the browser window, Internet Explorer
places the key code in window.event.keyCode", but FireFox passes the key code as
a parameter to the document's onkeypress function.
The code shown below displays the key code in a message box in both Internet
Explorer and Firefox when the user presses a key anywhere in the browser window.
(In other words the browser window has the focus).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function keyPressed(e)
{
var key;
if(e) key = e.which;
else key = event.keyCode;
alert(key);
}
document.onkeypress = keyPressed;
</script>
</head>
<body>
</body>
</html>
If you want to determine which key the user pressed inside an element such a
text box, Internet Explorer returns the key code in event.keyCode, but Firefox
returns the key code in event.charCode.
The code shown below displays the key code in a message box in both Internet
Explorer and Firefox when the user presses a key inside a textbox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function keyPressed(event)
{
var key;
if(event.keyCode) key = event.keyCode;
else key = event.charCode;
alert(key);
}
</script>
</head>
<body>
<form>
<input type="text" onkeypress="keyPressed(event)">
</form>
</body>
</html>
The key codes being returned are the ASCII codes representing the keys being
pressed. Shown below is an incomplete list of ASCII codes.
symbol code
a 97
b 98
c 99
d 100
e 101
f 102
g 103
h 104
i 105
j 106
k 107
l 108
m 109
n 110
o 111
p 112
q 113
r 114
s 115
t 116
u 117
v 118
w 119
x 120
y 121
z 122
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
space 32
! 33
" 34
# 35
$ 36
% 37
& 38
' 39
( 40
) 41
* 42
+ 43
, 44
- 45
. 46
/ 47
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
: 58
; 59
< 60
= 61
> 62
? 63
@ 64
| 
About BTH
User Agreement
Privacy
Site Map
Contact
Advertise Here
News Feeds
Free Downloads
RSS Feed
