Use JavaScript scripts to capture Keyboard Events

Use JavaScript scripts to capture Keyboard Events

Keywords: javascript capture Keyboard Events

In many applications, users want web applications to support some shortcut keys on the interface. The most common is support for shortcut keys such as top, bottom, left, and right, tab, and press Enter. Besides supporting keyboard shortcuts by running the applet and flash on the page, JavaScript can also be used for outstanding performance. With support for keyboard time, the operating system provides a complete set of virtual key values. To make our applications well support shortcut keys, it is essential to understand these key values. Common key values are listed as follows: A 0x65 u 0x85
B 0x66 v 0x86
C 0x67 w 0x87
D 0x68X0x88
E 0x69 Y 0x89
F 0x70 Z 0x90
G 0x71 0 0x48
H 0x72 1 0x49
I 0x73 2 0x50
J 0x74 3 0x51
K 0x75 4 0x52
L 0x76 5 0x53
M 0x77 6 0x54
N 0x78 7 0x55
O 0x79 8 0x56
P 0x80 9 0x57
Q 0x81 ESC 0x1b
R 0x82 CTRL 0x11
S 0x83 shift 0x10
T 0x84 enter 0xd (in decimal format: 13) Also direction keys: keys 37 → 39f1 key 112 F2 key 113f3 key 114 F4 key 115f5 key 115 F6 key 117 F8 key 119 F8 key 118f1 key 110 F4 key return deletion key 8 Tab key 40 Generally, the support for Shortcut Keys is effective within the entire document object. Therefore, when declaring a script, you can use the following method: <script language = "JavaScript" for = "document" event = "onkeydown"> in this way, within the entire document object, all the scripts you declare will take effect. Therefore, you do not need to use functions to process all the operations you need. This method may be more effective. To better support virtual keys, JavaScript further encapsulates common control keys, including Ctrl, shift, and ALT, corresponding operation commands are: window. event. ctrlkeywindow. event. shiftkeywindow. event. altkey is a simple example: if we want to block both the Enter key and the tab key from moving the cursor to the next form element on the page, we can add the following code: JS Code

1. If(Event. keycode = 13 | event. keycode = 40 ){
2. Event. keycode = 9;
3. Curtabindex = event. srcelement. tabindex + 1 // Add the value of the current tabindex to 1
4. For(N = 0; n <insert. elements. length; n ++)
5. {
6. If(Insert. elements [N]. tabindex = curtabindex) // locate the next form element.
7. {
8. Insert. elements [N]. Focus (); // move the focus
9. Return True;
10. }
11. }
12. }

However, you will soon find that the above Code is only valid on IE, but cannot get the desired result on Netscape, the reason is that Netscape and IE have different JS support for Keyboard Events. For events. keycode is supported only by IE, while E. which. Therefore, if your application needs to support the multi-browser version, you may only need to use E. which to replace window. event. keycode. Check the above instances in two browsers and you will find that the execution results are not always the same, because the keyboard code settings of the two browsers are different, therefore, you must use separate code to write this program separately (the tragedy of industry monopoly and competition! -- The pain is that our programmers ......). The following is a small program that processes IE and Netscape separately on the Internet. Through this code, we can easily see the different processing methods of the two browsers: JS Code

1. FunctionInit (){
2. If(Ns4) block = Document. blockdiv
3. If(Ie4) block = blockdiv. Style
4. Block. xpos = parseint (Block. Left)
5. Block. Active =False
6. Document. onkeydown = keydown
7. Document. onkeyup = keyup
8. If(Ns4) document. captureevents (event. keydown | event. keyup)
9. }
10.  FunctionKeydown (e ){
11. If(Ns4 ){VaRNkey = E. Which;VaRIekey = 0}
12. If(Ie4 ){VaRIekey = event. keycode;VaRNkey = 0}
13. If(Nkey = 97 | iekey = 65 )&&! Block. Active) {// if "A" Key is pressed
14. Block. Active =TrueSlide ()
15. }
16. }
17.  FunctionKeyup (e ){
18. If(Ns4 ){VaRNkey = E. Which;VaRIekey = 0}
19. If(Ie4 ){VaRIekey = event. keycode;VaRNkey = 0}
20. If(Nkey = 97 | iekey = 65 ){
21. Block. Active =False// If "A" Key is released
22. }
23. }
24.  FunctionSlide (){
25. If(Block. Active ){
26. Block. xpos + = 5
27. Block. Left = block. xpos
28. Status = block. xpos // not needed, just for show
29. SetTimeout ("slide ()", 30)
30. }
31. }