Key value for letters and numbers) |
Buttons |
Key code |
Buttons |
Key code |
Buttons |
Key code |
Buttons |
Key code |
A |
65 |
J |
74 |
S |
83 |
1 |
49 |
B |
66 |
K |
75 |
T |
84 |
2 |
50 |
C |
67 |
L |
76 |
U |
85 |
3 |
51 |
D |
68 |
M |
77 |
V |
86 |
4 |
52 |
E |
69 |
N |
78 |
W |
87 |
5 |
53 |
F |
70 |
O |
79 |
X |
88 |
6 |
54 |
G |
71 |
P |
80 |
Y |
89 |
7 |
55 |
H |
72 |
Q |
81 |
Z |
90 |
8 |
56 |
I |
73 |
R |
82 |
0 |
48 |
9 |
57 |
Keycode) |
Function key value (keycode) |
Buttons |
Key code |
Buttons |
Key code |
Buttons |
Key code |
Buttons |
Key code |
0 |
96 |
8 |
104 |
F1 |
112 |
F7 |
118 |
1 |
97 |
9 |
105 |
F2 |
113 |
F8 |
119 |
2 |
98 |
* |
106 |
F3 |
114 |
F9 |
120 |
3 |
99 |
+ |
107 |
F4 |
115 |
F10 |
121 |
4 |
100 |
Enter |
108 |
F5 |
116 |
F11 |
122 |
5 |
101 |
- |
109 |
F6 |
117 |
F12 |
123 |
6 |
102 |
. |
110 |
|
|
|
|
7 |
103 |
/ |
111 |
|
|
|
|
Key Value) |
Buttons |
Key code |
Buttons |
Key code |
Buttons |
Key code |
Buttons |
Key code |
Backspace |
8 |
ESC |
27 |
Right arrow |
39 |
-_ |
189 |
Tab |
9 |
Spacebar |
32 |
Down Arrow |
40 |
.> |
190 |
Clear |
12 |
Page up |
33 |
Insert |
45 |
/? |
191 |
Enter |
13 |
Page down |
34 |
Delete |
46 |
'~ |
192 |
Shift |
16 |
End |
35 |
Num Lock |
144 |
[{ |
219 |
Control |
17 |
Home |
36 |
;: |
186 |
/| |
220 |
ALT |
18 |
Left arrow |
37 |
= + |
187 |
]} |
221 |
Cape lock |
20 |
Up |
A piece of code is attached,
You can press the key on the keyboard to display the keyboard action and the keycode value.
Code:
<Style type = "text/CSS"> <br/> TD {text-align: center} <br/> </style> <br/> <script language = "JavaScript"> <br/> function Init () {<br/> document. onkeydown = showkeydown <br/> document. onkeyup = showkeyup <br/> document. onkeypress = showkeypress <br/>}</P> <p> function showkeydown (EVT) {<br/> EVT = (EVT )? EVT: window. event <br/> document. getelementbyid ("presskeycode "). innerhtml = 0 <br/> document. getelementbyid ("upkeycode "). innerhtml = 0 <br/> document. getelementbyid ("presscharcode "). innerhtml = 0 <br/> document. getelementbyid ("upcharcode "). innerhtml = 0 <br/> restoremodifiers ("") <br/> restoremodifiers ("down") <br/> restoremodifiers ("up") <br/> document. getelementbyid ("downkeycode "). innerhtml = E Vt. keycode <br/> If (EVT. charcode) {<br/> document. getelementbyid ("downcharcode "). innerhtml = EVT. charcode <br/>}< br/> showmodifiers ("down", EVT) <br/>}< br/> function showkeyup (EVT) {<br/> EVT = (EVT )? EVT: window. event <br/> document. getelementbyid ("upkeycode "). innerhtml = EVT. keycode <br/> If (EVT. charcode) {<br/> document. getelementbyid ("upcharcode "). innerhtml = EVT. charcode <br/>}< br/> showmodifiers ("up", EVT) <br/> return false <br/>}< br/> function showkeypress (EVT) {<br/> EVT = (EVT )? EVT: window. event <br/> document. getelementbyid ("presskeycode "). innerhtml = EVT. keycode <br/> If (EVT. charcode) {<br/> document. getelementbyid ("presscharcode "). innerhtml = EVT. charcode <br/>}< br/> showmodifiers ("", EVT) <br/> return false <br/>}< br/> function showmodifiers (EXT, EVT) {<br/> restoremodifiers (EXT) <br/> If (EVT. shiftkey) {<br/> document. getelementbyid ("shift" + ext ). style. backgroundcolor = "# ff0000" <br/>}< br/> If (EVT. ctrlkey) {<br/> document. getelementbyid ("Ctrl" + ext ). style. backgroundcolor = "#00ff00" <br/>}< br/> If (EVT. altkey) {<br/> document. getelementbyid ("Alt" + ext ). style. backgroundcolor = "# 0000ff" <br/>}< br/> function restoremodifiers (EXT) {<br/> document. getelementbyid ("shift" + ext ). style. backgroundcolor = "# ffffff" <br/> document. getelementbyid ("Ctrl" + ext ). style. backgroundcolor = "# ffffff" <br/> document. getelementbyid ("Alt" + ext ). style. backgroundcolor = "# ffffff" <br/>}< br/> </SCRIPT> <br/> </pead> </P> <p> <body onload = "init () "> <br/> <p> keyboard event handler lab </p> <br/> <HR> <br/> <form> <br/> <Table border = 2 cellpadding = 2> <br/> <tr> <TH> </Th> <TH> onkeydown </Th> <TH> onkeypress </Th> <TH> onkeyup </ th> </tr> <br/> <tr> <TH> key codes </Th> <br/> <TD id = "downkeycode"> 0 </TD> <br/> <TD id = "presskeycode"> 0 </TD> <br/> <TD id = "upkeycode"> 0 </TD> <br/> </tr> <br/> <tr> <TH> char codes (ie5/MAC; nn6) </Th> <br/> <TD id = "downcharcode"> 0 </TD> <br/> <TD id = "presscharcode"> 0 </TD> <br /> <TD id = "upcharcode"> 0 </TD> <br/> </tr> <br/> <tr> <TH rowspan = 3> modifier keys </ th> <br/> <TD> <span id = "shiftdown"> shift </span> </TD> <br/> <TD> <span id = "shift"> shift </span> </TD> <br/> <TD> <span id = "shiftup"> shift </span> </TD> <br/> </ tr> <br/> <TD> <span id = "ctrldown"> CTRL </span> </TD> <br/> <TD> <span id = "Ctrl"> CTRL </span> </TD> <br/> <TD> <span id = "ctrlup"> CTRL </span> </TD> <br/> </tr> <br/> <TD> <span id = "altdown"> alt </span> </TD> <br/> <TD> <span id = "Alt"> alt </span> </TD> <br/> <TD> <span id = "altup"> alt </span> </TD> <br/> </tr> <br/> </table> <br/> </form>
================ The following can be copied. Now copy it and see the result ================
<Style type = "text/CSS">
TD {text-align: Center}
</Style>
<Script language = "JavaScript">
Function Init (){
Document. onkeydown = showkeydown
Document. onkeyup = showkeyup
Document. onkeypress = showkeypress
}
Function showkeydown (EVT ){
EVT = (EVT )? EVT: window. Event
Document. getelementbyid ("presskeycode"). innerhtml = 0
Document. getelementbyid ("upkeycode"). innerhtml = 0
Document. getelementbyid ("presscharcode"). innerhtml = 0
Document. getelementbyid ("upcharcode"). innerhtml = 0
Restoremodifiers ("")
Restoremodifiers ("down ")
Restoremodifiers ("up ")
Document. getelementbyid ("downkeycode"). innerhtml = EVT. keycode
If (EVT. charcode ){
Document. getelementbyid ("downcharcode"). innerhtml = EVT. charcode
}
Showmodifiers ("down", EVT)
}
Function showkeyup (EVT ){
EVT = (EVT )? EVT: window. Event
Document. getelementbyid ("upkeycode"). innerhtml = EVT. keycode
If (EVT. charcode ){
Document. getelementbyid ("upcharcode"). innerhtml = EVT. charcode
}
Showmodifiers ("up", EVT)
Return false
}
Function showkeypress (EVT ){
EVT = (EVT )? EVT: window. Event
Document. getelementbyid ("presskeycode"). innerhtml = EVT. keycode
If (EVT. charcode ){
Document. getelementbyid ("presscharcode"). innerhtml = EVT. charcode
}
Showmodifiers ("", EVT)
Return false
}
Function showmodifiers (EXT, EVT ){
Restoremodifiers (EXT)
If (EVT. shiftkey ){
Document. getelementbyid ("shift" + ext). style. backgroundcolor = "# ff0000"
}
If (EVT. ctrlkey ){
Document. getelementbyid ("Ctrl" + ext). style. backgroundcolor = "#00ff00"
}
If (EVT. altkey ){
Document. getelementbyid ("Alt" + ext). style. backgroundcolor = "# 0000ff"
}
}
Function restoremodifiers (EXT ){
Document. getelementbyid ("shift" + ext). style. backgroundcolor = "# ffffff"
Document. getelementbyid ("Ctrl" + ext). style. backgroundcolor = "# ffffff"
Document. getelementbyid ("Alt" + ext). style. backgroundcolor = "# ffffff"
}
</SCRIPT>
</Head>
<Body onload = "Init ()">
<H1> keyboard event handler lab <HR>
<Form>
<Table border = 2 cellpadding = 2>
<Tr> <TH> </Th> <TH> onkeydown </Th> <TH> onkeypress </Th> <TH> onkeyup </Th> </tr>
<Tr> <TH> key codes </Th>
<TD id = "downkeycode"> 0 </TD>
<TD id = "presskeycode"> 0 </TD>
<TD id = "upkeycode"> 0 </TD>
</Tr>
<Tr> <TH> char codes (ie5/MAC; nn6) </Th>
<TD id = "downcharcode"> 0 </TD>
<TD id = "presscharcode"> 0 </TD>
<TD id = "upcharcode"> 0 </TD>
</Tr>
<Tr> <TH rowspan = 3> modifier keys </Th>
<TD> <span id = "shiftdown"> shift </span> </TD>
<TD> <span id = "shift"> shift </span> </TD>
<TD> <span id = "shiftup"> shift </span> </TD>
</Tr>
<Tr>
<TD> <span id = "ctrldown"> CTRL </span> </TD>
<TD> <span id = "Ctrl"> CTRL </span> </TD>
<TD> <span id = "ctrlup"> CTRL </span> </TD>
</Tr>
<Tr>
<TD> <span id = "altdown"> alt </span> </TD>
<TD> <span id = "Alt"> alt </span> </TD>
<TD> <span id = "altup"> alt </span> </TD>
</Tr>
</Table>
</Form>