Web page and keyboard

Web page

Start with the basics. In this tutorial, all ie means WINDOWXP + IE 6.0, all FF means FF 1.5.

Programming section

In the 1.1 Form. The shortcut key for Submit is Enter,reset, which is ESC.
1.1.1 in IE, pressing the ENTER key does not trigger the OnClick event of submit, pressing the ESC key will trigger the reset onclick event
1.1.2 in FF and IE is the opposite, press the ENTER key will trigger the OnClick event submit, press the ESC key will not trigger reset of the OnClick event
1.1.3 in form, the time firing order is: Submit button's onclick ==> form onsubmit

Run Code Box

<!--Author:hutia--><form ><input value= "Focus me, the press ENTER key or ESC key" size=100><br> <input type=submit ><input Type=reset ></form><script>document.forms[0].elements[0].focus ( );</script>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

1.2. Accesskey Properties.
1.2.1 Note that accesskey settings take precedence over menus if they are the same as the browser's menu. The shortcut key when used is the ALT + Set key value
1.2.2 label for property with accesskey effect is better
1.2.3 in IE, the link object's accesskey just shifts focus to link, not the same as clicking, FF is the equivalent of clicking. In contrast, the accesskey effect of input type=checkbox is clicked on both IE and FF.

Run Code Box

<!--Author:hutia--><input accesskey= "q" value= "press ALT + Q to focus me." Size= "><input accesskey=" A "value=" press ALT + A can focus me. "Size=" ><pr><p>use label:</p><label for= "NNN1" acc esskey= "D" >a<u>d</u>dress</label><input id= "nnn1" value= "press ALT + D can focus me." Size= " ><pr><p>link:</p><a accesskey= "F" href= "#link" >press ALT + F to focus me.</a> <br><input type=checkbox accesskey= "W" href= "#link"/>press ALT + W to focus me.

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

2. Then you need to program.

2.1 Simple key capture.
2.1.1 events have onkeydown, onkeypress, onkeyup
2.1.2 IE is different from the FF event, please learn the following code:

Run Code Box

<script>//Author:hutia function Chkkey (e) {var e=window.event?window.event:e; var srcele=e.srcelement? E.srcelement:e.target; var Etype=e.type; srcele.value+= "\r\nevent:" +etype+ "\tkey Code:" +e.keycode+ "T"; E.returnvalue=false;} </script><textarea onkeyup= "Chkkey (arguments[0))," onkeypress= "Chkkey (arguments[0))," style= "width:98%; Height:400px;overflow:auto; " ></textarea>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

2.2 Because events will bubble, you can capture keystrokes on the document to customize shortcut keys.

Run Code Box

<script>//Author:hutiavar pressedkeys=new Array (); function Chkkey (e) {var e=window.event?window.event:e; var Srcele=e.srcelement?e.srcelement:e.target; var Etype=e.type; var Ck=keychar (e). toLowerCase (); Switch (eType) {case "KeyDown": if (Allkeysup ()) {if (document.documentElement.setCapture) {Document.documentelemen T.setcapture (); Document.documentelement.onlosecapture=resetkeys; }} pressedkeys[ck]=true; Break Case "KeyUp": pressedkeys[ck]=false; if (Allkeysup ()) Resetkeys (); Break } if (pressedkeys["a"]&&pressedkeys["B"]&&pressedkeys["C"]) {Resetkeys ();d Ocument.getelementbyid ( "A1"). Select (); e.returnvalue=false;} if (pressedkeys["D"]&&pressedkeys["B"]&&pressedkeys["X"]) {Resetkeys ();d Ocument.getelementbyid (" A2 "). Select (); e.returnvalue=false;} }function Resetkeys () {for (var i in Pressedkeys) pressedkeys[i]=false; if (document.documentElement.releaseCapture) { Document.documentelement.onlosecapture=function () {}; Document.docuMentelement.releasecapture (); }}function Allkeysup () {for (var i-Pressedkeys) if (Pressedkeys[i]) return (false), return (true); function Keychar (e) {var e=window.event?window.event:e; if (e.shiftkey) {switch (e.keycode.tostring ()) {case ' 96 ': Return ("0"); Case "the": Return ("1"); Case "the": Return ("2"); Case "the": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "102": Return ("6"); Case "the": Return ("7"); Case "rule": Return ("8"); Case "the": Return ("9"); Case "a": Return ("/"); Case "a": Return ("."); Case "the": Return ("*"); Case "109": Return ("-"); Case "a": Return ("+"); Case "144": Return ("NumLock"); Case "the": Return ("~"); Case "a": Return ("!"); Case "a": Return ("@"); Case "Wuyi": Return ("#"); Case "a": Return ("$"); Case "a": return ("%"); Case "Si": Return ("^"); Case "a": Return ("&"); Case "a": Return ("*"); Case "a": Return ("("); Case "a": Return (")"); Case "189": Return ("_"); Case "187": Return ("+"); Case "219": Return ("{"); Case "221": Return ("}"); Case "the": Return ("|"); Case "a": Return ("Caplock"); Case "186": Return (":"); Case "222": Return ("\"); Case "188": Return ("<"); Case "190": Return (">"); Case "191": Return ("?"); Case "8": Return ("backspace"); Case "9": Return ("tab"); Case "Bayi": Return ("Q"); Case "the": Return ("W"); Case "to": Return ("E"); Case "to": Return ("R"); Case "the": Return ("T"); Case "Mr": Return ("Y"); Case "the": Return ("U"); Case "the": Return ("I"); Case "the": Return ("O"); Case "No": Return ("P"); Case "the": Return ("A"); Case "a": Return ("S"); Case "to": Return ("D"); Case "a": Return ("F"); Case "the": Return ("G"); Case "a": Return ("H"); Case "the": Return ("J"); Case "a": Return ("K"); Case "a": Return ("L"); Case "a": Return ("shift"); Case "the": Return ("Z"); Case "the": Return ("X"); Case "a": Return ("C"); Case "the": Return ("V"); Case "a": Return ("B"); Case "the": Return ("N"); Case "a": Return ("M"); Case "a": Return ("Ctrl"); Case "91": Return (" Win "); Case "the": Return ("Win"); Case "a": Return ("Alt"); Case "a": Return (""); Case "a": Return ("menu"); Case "the": Return ("Up"); Case "a": Return ("Down"); Case "Panax Notoginseng": Return ("left"); Case "the": Return ("right"); Case "a": Return ("Insert"); Case "+": Return ("delete"); Case "a": Return ("Home"); Case "a": Return ("End"); Case "a": Return ("PageUp"); Case "a": Return ("PageDown"); Case "a": Return ("Printcreen"); Case "145": Return ("ScrollLock"); Case "a": Return ("pause"); Case "a": Return ("ESC"); Case "a": Return ("Middle"); Case "a": Return ("\ r \ n"); Case "112": Return ("F1"); Case "113": Return ("F2"); Case "114": Return ("F3"); Case "the": Return ("F4"); Case "116": Return ("F5"); Case "117": Return ("F6"); Case "118": Return ("F7"); Case "119": Return ("F8"); Case "a": Return ("F9"); Case "121": Return ("F10"); Case "122": Return ("F11"); Case "123": Return ("F12"); Default:return ("Unknown"); }}else{switch (e.keycode.tostring ()) {case "": Return (" 0 "); Case "the": Return ("1"); Case "the": Return ("2"); Case "the": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "102": Return ("6"); Case "the": Return ("7"); Case "rule": Return ("8"); Case "the": Return ("9"); Case "a": Return ("/"); Case "a": Return ("."); Case "the": Return ("*"); Case "109": Return ("-"); Case "a": Return ("+"); Case "144": Return ("NumLock"); Case "the": Return ("'"); Case "a": Return ("1"); Case "a": Return ("2"); Case "Wuyi": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "WU": Return ("6"); Case "a": Return ("7"); Case "a": Return ("8"); Case "a": Return ("9"); Case "a": Return ("0"); Case "189": Return ("-"); Case "187": return ("="); Case "8": Return ("backspace"); Case "9": Return ("tab"); Case "Bayi": Return ("Q"); Case "the": Return ("W"); Case "to": Return ("E"); Case "to": Return ("R"); Case "the": Return ("T"); Case "Mr": Return ("Y"); Case "the": Return ("U"); Case "the": Return ("I"); CaSe "the": Return ("O"); Case "No": Return ("P"); Case "219": Return ("["); Case "221": Return ("]"); Case "the": Return ("\"); Case "a": Return ("Caplock"); Case "the": Return ("a"); Case "a": Return ("S"); Case "to": Return ("D"); Case "a": Return ("F"); Case "the": Return ("G"); Case "a": Return ("H"); Case "the": Return ("J"); Case "a": Return ("K"); Case "a": Return ("L"); Case "186": Return (";"); Case "222": Return ("'"); Case "a": Return ("shift"); Case "the": Return ("Z"); Case "the": Return ("X"); Case "a": Return ("C"); Case "the": Return ("V"); Case "a": Return ("B"); Case "the": Return ("n"); Case "a": Return ("M"); Case "188": Return (","); Case "190": Return ("."); Case "191": Return ("/"); Case "a": Return ("Ctrl"); Case "a": Return ("Win"); Case "the": Return ("Win"); Case "a": Return ("Alt"); Case "a": Return (""); Case "a": Return ("menu"); Case "the": Return ("Up"); Case "a": Return ("Down"); Case "Panax Notoginseng": Return ("left"); Case "the": Return ("right"); Case "45":Return ("Insert"); Case "+": Return ("delete"); Case "a": Return ("Home"); Case "a": Return ("End"); Case "a": Return ("PageUp"); Case "a": Return ("PageDown"); Case "a": Return ("Printcreen"); Case "145": Return ("ScrollLock"); Case "a": Return ("pause"); Case "a": Return ("ESC"); Case "a": Return ("Middle"); Case "a": Return ("\ r \ n"); Case "112": Return ("F1"); Case "113": Return ("F2"); Case "114": Return ("F3"); Case "the": Return ("F4"); Case "116": Return ("F5"); Case "117": Return ("F6"); Case "118": Return ("F7"); Case "119": Return ("F8"); Case "a": Return ("F9"); Case "121": Return ("F10"); Case "122": Return ("F11"); Case "123": Return ("F12"); Default:return ("Unknown"); }}}document.documentelement.onkeydown=document.documentelement.onkeyup=chkkey;</script><input value= " Press A + B + C to focus on me. "Size=" id= "A1" ><input value= "Press D + B + x to focus on me." Size= "id=" A2 ">

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

3. In order to meet the requirements of fmt00, close-up of this paragraph, I hope fmt00 can like, haha

Run Code Box

<script>//Author:hutiavar pressedkeys=new Array (); function Chkkey (e) {var e=window.event?window.event:e; var Srcele=e.srcelement?e.srcelement:e.target; var Etype=e.type; var Ck=keychar (e). toLowerCase (); Switch (eType) {case "KeyDown": if (Allkeysup ()) {if (document.documentElement.setCapture) {Document.documentelemen T.setcapture (); Document.documentelement.onlosecapture=resetkeys; }} pressedkeys[ck]=true; Break Case "KeyUp": pressedkeys[ck]=false; if (Allkeysup ()) Resetkeys (); Break } if (pressedkeys["a"]&&pressedkeys["B"]&&pressedkeys["C"]) {Resetkeys ();d Ocument.getelementbyid ( "A1"). Select (); e.returnvalue=false;} if (pressedkeys["D"]&&pressedkeys["B"]&&pressedkeys["X"]) {Resetkeys ();d Ocument.getelementbyid (" A2 "). Select (); e.returnvalue=false;} }function Resetkeys () {for (var i in Pressedkeys) pressedkeys[i]=false; if (document.documentElement.releaseCapture) { Document.documentelement.onlosecapture=function () {}; Document.docuMentelement.releasecapture (); }}function Allkeysup () {for (var i-Pressedkeys) if (Pressedkeys[i]) return (false), return (true); function Keychar (e) {var e=window.event?window.event:e; if (e.shiftkey) {switch (e.keycode.tostring ()) {case ' 96 ': Return ("0"); Case "the": Return ("1"); Case "the": Return ("2"); Case "the": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "102": Return ("6"); Case "the": Return ("7"); Case "rule": Return ("8"); Case "the": Return ("9"); Case "a": Return ("/"); Case "a": Return ("."); Case "the": Return ("*"); Case "109": Return ("-"); Case "a": Return ("+"); Case "144": Return ("NumLock"); Case "the": Return ("~"); Case "a": Return ("!"); Case "a": Return ("@"); Case "Wuyi": Return ("#"); Case "a": Return ("$"); Case "a": return ("%"); Case "Si": Return ("^"); Case "a": Return ("&"); Case "a": Return ("*"); Case "a": Return ("("); Case "a": Return (")"); Case "189": Return ("_"); Case "187": Return ("+"); Case "219": Return ("{"); Case "221": Return ("}"); Case "the": Return ("|"); Case "a": Return ("Caplock"); Case "186": Return (":"); Case "222": Return ("\"); Case "188": Return ("<"); Case "190": Return (">"); Case "191": Return ("?"); Case "8": Return ("backspace"); Case "9": Return ("tab"); Case "Bayi": Return ("Q"); Case "the": Return ("W"); Case "to": Return ("E"); Case "to": Return ("R"); Case "the": Return ("T"); Case "Mr": Return ("Y"); Case "the": Return ("U"); Case "the": Return ("I"); Case "the": Return ("O"); Case "No": Return ("P"); Case "the": Return ("A"); Case "a": Return ("S"); Case "to": Return ("D"); Case "a": Return ("F"); Case "the": Return ("G"); Case "a": Return ("H"); Case "the": Return ("J"); Case "a": Return ("K"); Case "a": Return ("L"); Case "a": Return ("shift"); Case "the": Return ("Z"); Case "the": Return ("X"); Case "a": Return ("C"); Case "the": Return ("V"); Case "a": Return ("B"); Case "the": Return ("N"); Case "a": Return ("M"); Case "a": Return ("Ctrl"); Case "91": Return (" Win "); Case "the": Return ("Win"); Case "a": Return ("Alt"); Case "a": Return (""); Case "a": Return ("menu"); Case "the": Return ("Up"); Case "a": Return ("Down"); Case "Panax Notoginseng": Return ("left"); Case "the": Return ("right"); Case "a": Return ("Insert"); Case "+": Return ("delete"); Case "a": Return ("Home"); Case "a": Return ("End"); Case "a": Return ("PageUp"); Case "a": Return ("PageDown"); Case "a": Return ("Printcreen"); Case "145": Return ("ScrollLock"); Case "a": Return ("pause"); Case "a": Return ("ESC"); Case "a": Return ("Middle"); Case "a": Return ("\ r \ n"); Case "112": Return ("F1"); Case "113": Return ("F2"); Case "114": Return ("F3"); Case "the": Return ("F4"); Case "116": Return ("F5"); Case "117": Return ("F6"); Case "118": Return ("F7"); Case "119": Return ("F8"); Case "a": Return ("F9"); Case "121": Return ("F10"); Case "122": Return ("F11"); Case "123": Return ("F12"); Default:return ("Unknown"); }}else{switch (e.keycode.tostring ()) {case "": Return (" 0 "); Case "the": Return ("1"); Case "the": Return ("2"); Case "the": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "102": Return ("6"); Case "the": Return ("7"); Case "rule": Return ("8"); Case "the": Return ("9"); Case "a": Return ("/"); Case "a": Return ("."); Case "the": Return ("*"); Case "109": Return ("-"); Case "a": Return ("+"); Case "144": Return ("NumLock"); Case "the": Return ("'"); Case "a": Return ("1"); Case "a": Return ("2"); Case "Wuyi": Return ("3"); Case "a": Return ("4"); Case "a": Return ("5"); Case "WU": Return ("6"); Case "a": Return ("7"); Case "a": Return ("8"); Case "a": Return ("9"); Case "a": Return ("0"); Case "189": Return ("-"); Case "187": return ("="); Case "8": Return ("backspace"); Case "9": Return ("tab"); Case "Bayi": Return ("Q"); Case "the": Return ("W"); Case "to": Return ("E"); Case "to": Return ("R"); Case "the": Return ("T"); Case "Mr": Return ("Y"); Case "the": Return ("U"); Case "the": Return ("I"); CaSe "the": Return ("O"); Case "No": Return ("P"); Case "219": Return ("["); Case "221": Return ("]"); Case "the": Return ("\"); Case "a": Return ("Caplock"); Case "the": Return ("a"); Case "a": Return ("S"); Case "to": Return ("D"); Case "a": Return ("F"); Case "the": Return ("G"); Case "a": Return ("H"); Case "the": Return ("J"); Case "a": Return ("K"); Case "a": Return ("L"); Case "186": Return (";"); Case "222": Return ("'"); Case "a": Return ("shift"); Case "the": Return ("Z"); Case "the": Return ("X"); Case "a": Return ("C"); Case "the": Return ("V"); Case "a": Return ("B"); Case "the": Return ("n"); Case "a": Return ("M"); Case "188": Return (","); Case "190": Return ("."); Case "191": Return ("/"); Case "a": Return ("Ctrl"); Case "a": Return ("Win"); Case "the": Return ("Win"); Case "a": Return ("Alt"); Case "a": Return (""); Case "a": Return ("menu"); Case "the": Return ("Up"); Case "a": Return ("Down"); Case "Panax Notoginseng": Return ("left"); Case "the": Return ("right"); Case "45":Return ("Insert"); Case "+": Return ("delete"); Case "a": Return ("Home"); Case "a": Return ("End"); Case "a": Return ("PageUp"); Case "a": Return ("PageDown"); Case "a": Return ("Printcreen"); Case "145": Return ("ScrollLock"); Case "a": Return ("pause"); Case "a": Return ("ESC"); Case "a": Return ("Middle"); Case "a": Return ("\ r \ n"); Case "112": Return ("F1"); Case "113": Return ("F2"); Case "114": Return ("F3"); Case "the": Return ("F4"); Case "116": Return ("F5"); Case "117": Return ("F6"); Case "118": Return ("F7"); Case "119": Return ("F8"); Case "a": Return ("F9"); Case "121": Return ("F10"); Case "122": Return ("F11"); Case "123": Return ("F12"); Default:return ("Unknown"); }}}document.documentelement.onkeydown=document.documentelement.onkeyup=chkkey;</script><input value= " Press A + B + C to focus on me. "Size=" id= "A1" ><input value= "Press D + B + x to focus on me." Size= "id=" A2 ">

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]