[教程]用代码让你了解网页与键盘

从最基础的说起。本教程中，所有IE 均指 WindowXP + IE 6.0, 所有 FF 均指 FF 1.5。

1. 不用编程的部分

1.1 Form 中。 submit 的快捷键是 enter,reset 的快捷键是 esc。

1.1.1 在 IE 中，按下enter 键后 却不会激发 submit 的 onclick 事件, 按下esc 键后 会激发 reset 的 onclick 事件

1.1.2 在 FF 中与 IE 正相反，按下enter 键后 会激发 submit 的 onclick 事件, 按下esc 键后 却不会激发 reset 的 onclick 事件

1.1.3 在 form 中，时间激发顺序是： submit 按钮的 onclick ==>  form 的 onsubmit

<!-- Author: Hutia --><form onsubmit="alert('I am submiting');return false;"><input value="focus me, the press enter key or esc key" size=100><br><input type=submit onclick="alert('submit button is clicked');"><input type=reset onclick="alert('reset button is clicked');"></form><script>document.forms[0].elements[0].focus();</script>

1.2. Accesskey 属性。

1.2.1 注意 accesskey 的设置如果和浏览器的菜单相同，会优先于菜单。使用时的快捷键是 alt + 设置的键值

1.2.2 label 的 for 属性配合 accesskey 效果较好

1.2.3 在IE 中，Link 对象的 accesskey 只是使 焦点转移到 link 上，并不等同于点击，FF 中则相当于点击. 与他对比的是，input type=checkbox 的 accesskey 效果不论在IE 还是 FF 中都是点击。

<!-- Author: Hutia --><input accesskey="q" value="press alt + q to focus me." size="100"><input accesskey="a" value="press alt + a you can focus me." size="100"><hr><h4>Use Label:</h4><label for="nnn1" accesskey="d">A<u>d</u>dress</label><input id="nnn1" value="press alt + d you can focus me." size="100"><hr><h4>Link:</h4><a accesskey="f" href="#link" onclick="alert('Link is clicked.');">press alt + f to focus me.</a><br><input type=checkbox accesskey="w" href="#link" onclick="alert('Checkbox is clicked.');" />press alt + w to focus me.

 2. 然后就需要编程了

2.1 简单的按键捕获。

2.1.1 事件有 onkeydown, onkeypress, onkeyup

2.1.2 IE 与 FF 的 事件写法不同，请学习下面的代码
<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 onkeydown="chkKey(arguments[0]);" onkeyup="chkKey(arguments[0]);" onkeypress="chkKey(arguments[0]);" style="width:98％; height:400px;overflow:auto;"></textarea>

2.2 因为事件会冒泡，所以，可以在 document 上捕获按键来自定义快捷键。

<script>// Author: Hutiafunction chkKey(e){var e=window.event?window.event:e;var srcEle=e.srcElement?e.srcElement:e.target;if(e.ctrlKey&&e.altKey&&keyChar(e)=="u")document.getElementById("a1").select();if(e.ctrlKey&&e.altKey&&keyChar(e)=="2")document.getElementById("a2").select();}function keyChar(e){ var e=window.event?window.event:e; if(e.shiftKey){  switch(e.keyCode.toString()){   case "96":return("0");   case "97":return("1");   case "98":return("2");   case "99":return("3");   case "100":return("4");   case "101":return("5");   case "102":return("6");   case "103":return("7");   case "104":return("8");   case "105":return("9");   case "111":return("/");   case "110":return(".");   case "106":return("*");   case "109":return("-");   case "107":return("+");   case "144":return("numlock");   case "192":return("~");   case "49":return("!");   case "50":return("@");   case "51":return("#");   case "52":return("$");   case "53":return("％");   case "54":return("^");   case "55":return("&");   case "56":return("*");   case "57":return("(");   case "48":return(")");   case "189":return("_");   case "187":return("+");   case "219":return("{");   case "221":return("}");   case "220":return("|");   case "20":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 "81":return("Q");   case "87":return("W");   case "69":return("E");   case "82":return("R");   case "84":return("T");   case "89":return("Y");   case "85":return("U");   case "73":return("I");   case "79":return("O");   case "80":return("P");   case "65":return("A");   case "83":return("S");   case "68":return("D");   case "70":return("F");   case "71":return("G");   case "72":return("H");   case "74":return("J");   case "75":return("K");   case "76":return("L");   case "16":return("shift");   case "90":return("Z");   case "88":return("X");   case "67":return("C");   case "86":return("V");   case "66":return("B");   case "78":return("N");   case "77":return("M");   case "17":return("ctrl");   case "91":return("win");   case "92":return("win");   case "18":return("alt");   case "32":return(" ");   case "93":return("menu");   case "38":return("up");   case "40":return("down");   case "37":return("left");   case "39":return("right");   case "45":return("insert");   case "46":return("delete");   case "36":return("home");   case "35":return("end");   case "33":return("pageup");   case "34":return("pagedown");   case "34":return("printcreen");   case "145":return("scrolllock");   case "19":return("pause");   case "27":return("esc");   case "12":return("middle");   case "13":return("\r\n");   case "112":return("f1");   case "113":return("f2");   case "114":return("f3");   case "115":return("f4");   case "116":return("f5");   case "117":return("f6");   case "118":return("f7");   case "119":return("f8");   case "120":return("f9");   case "121":return("f10");   case "122":return("f11");   case "123":return("f12");   default:return("unknown");  } }else{  switch(e.keyCode.toString()){   case "96":return("0");   case "97":return("1");   case "98":return("2");   case "99":return("3");   case "100":return("4");   case "101":return("5");   case "102":return("6");   case "103":return("7");   case "104":return("8");   case "105":return("9");   case "111":return("/");   case "110":return(".");   case "106":return("*");   case "109":return("-");   case "107":return("+");   case "144":return("numlock");   case "192":return("`");   case "49":return("1");   case "50":return("2");   case "51":return("3");   case "52":return("4");   case "53":return("5");   case "54":return("6");   case "55":return("7");   case "56":return("8");   case "57":return("9");   case "48":return("0");   case "189":return("-");   case "187":return("=");   case "8":return("backspace");   case "9":return("tab");   case "81":return("q");   case "87":return("w");   case "69":return("e");   case "82":return("r");   case "84":return("t");   case "89":return("y");   case "85":return("u");   case "73":return("i");   case "79":return("o");   case "80":return("p");   case "219":return("[");   case "221":return("]");   case "220":return("\\");   case "20":return("caplock");   case "65":return("a");   case "83":return("s");   case "68":return("d");   case "70":return("f");   case "71":return("g");   case "72":return("h");   case "74":return("j");   case "75":return("k");   case "76":return("l");   case "186":return(";");   case "222":return("'");   case "16":return("shift");   case "90":return("z");   case "88":return("x");   case "67":return("c");   case "86":return("v");   case "66":return("b");   case "78":return("n");   case "77":return("m");   case "188":return(",");   case "190":return(".");   case "191":return("/");   case "17":return("ctrl");   case "91":return("win");   case "92":return("win");   case "18":return("alt");   case "32":return(" ");   case "93":return("menu");   case "38":return("up");   case "40":return("down");   case "37":return("left");   case "39":return("right");   case "45":return("insert");   case "46":return("delete");   case "36":return("home");   case "35":return("end");   case "33":return("pageup");   case "34":return("pagedown");   case "34":return("printcreen");   case "145":return("scrolllock");   case "19":return("pause");   case "27":return("esc");   case "12":return("middle");   case "13":return("\r\n");   case "112":return("f1");   case "113":return("f2");   case "114":return("f3");   case "115":return("f4");   case "116":return("f5");   case "117":return("f6");   case "118":return("f7");   case "119":return("f8");   case "120":return("f9");   case "121":return("f10");   case "122":return("f11");   case "123":return("f12");   default:return("unknown");  } }}document.documentElement.onkeydown=chkKey;</script><input value="press ctrl + alt + u to focus on me." size="100" id="a1"><input value="press ctrl + alt + 2 to focus on me." size="100" id="a2">

3. 为了满足fmt00的要求，特写下此段，希望 fmt00 能够喜欢，哈哈

<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.documentElement.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();document.getElementById("a1").select();e.returnValue=false;}if(pressedKeys["d"]&&pressedKeys["b"]&&pressedKeys["x"]){resetKeys();document.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 in 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 "97":return("1");   case "98":return("2");   case "99":return("3");   case "100":return("4");   case "101":return("5");   case "102":return("6");   case "103":return("7");   case "104":return("8");   case "105":return("9");   case "111":return("/");   case "110":return(".");   case "106":return("*");   case "109":return("-");   case "107":return("+");   case "144":return("numlock");   case "192":return("~");   case "49":return("!");   case "50":return("@");   case "51":return("#");   case "52":return("$");   case "53":return("％");   case "54":return("^");   case "55":return("&");   case "56":return("*");   case "57":return("(");   case "48":return(")");   case "189":return("_");   case "187":return("+");   case "219":return("{");   case "221":return("}");   case "220":return("|");   case "20":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 "81":return("Q");   case "87":return("W");   case "69":return("E");   case "82":return("R");   case "84":return("T");   case "89":return("Y");   case "85":return("U");   case "73":return("I");   case "79":return("O");   case "80":return("P");   case "65":return("A");   case "83":return("S");   case "68":return("D");   case "70":return("F");   case "71":return("G");   case "72":return("H");   case "74":return("J");   case "75":return("K");   case "76":return("L");   case "16":return("shift");   case "90":return("Z");   case "88":return("X");   case "67":return("C");   case "86":return("V");   case "66":return("B");   case "78":return("N");   case "77":return("M");   case "17":return("ctrl");   case "91":return("win");   case "92":return("win");   case "18":return("alt");   case "32":return(" ");   case "93":return("menu");   case "38":return("up");   case "40":return("down");   case "37":return("left");   case "39":return("right");   case "45":return("insert");   case "46":return("delete");   case "36":return("home");   case "35":return("end");   case "33":return("pageup");   case "34":return("pagedown");   case "34":return("printcreen");   case "145":return("scrolllock");   case "19":return("pause");   case "27":return("esc");   case "12":return("middle");   case "13":return("\r\n");   case "112":return("f1");   case "113":return("f2");   case "114":return("f3");   case "115":return("f4");   case "116":return("f5");   case "117":return("f6");   case "118":return("f7");   case "119":return("f8");   case "120":return("f9");   case "121":return("f10");   case "122":return("f11");   case "123":return("f12");   default:return("unknown");  } }else{  switch(e.keyCode.toString()){   case "96":return("0");   case "97":return("1");   case "98":return("2");   case "99":return("3");   case "100":return("4");   case "101":return("5");   case "102":return("6");   case "103":return("7");   case "104":return("8");   case "105":return("9");   case "111":return("/");   case "110":return(".");   case "106":return("*");   case "109":return("-");   case "107":return("+");   case "144":return("numlock");   case "192":return("`");   case "49":return("1");   case "50":return("2");   case "51":return("3");   case "52":return("4");   case "53":return("5");   case "54":return("6");   case "55":return("7");   case "56":return("8");   case "57":return("9");   case "48":return("0");   case "189":return("-");   case "187":return("=");   case "8":return("backspace");   case "9":return("tab");   case "81":return("q");   case "87":return("w");   case "69":return("e");   case "82":return("r");   case "84":return("t");   case "89":return("y");   case "85":return("u");   case "73":return("i");   case "79":return("o");   case "80":return("p");   case "219":return("[");   case "221":return("]");   case "220":return("\\");   case "20":return("caplock");   case "65":return("a");   case "83":return("s");   case "68":return("d");   case "70":return("f");   case "71":return("g");   case "72":return("h");   case "74":return("j");   case "75":return("k");   case "76":return("l");   case "186":return(";");   case "222":return("'");   case "16":return("shift");   case "90":return("z");   case "88":return("x");   case "67":return("c");   case "86":return("v");   case "66":return("b");   case "78":return("n");   case "77":return("m");   case "188":return(",");   case "190":return(".");   case "191":return("/");   case "17":return("ctrl");   case "91":return("win");   case "92":return("win");   case "18":return("alt");   case "32":return(" ");   case "93":return("menu");   case "38":return("up");   case "40":return("down");   case "37":return("left");   case "39":return("right");   case "45":return("insert");   case "46":return("delete");   case "36":return("home");   case "35":return("end");   case "33":return("pageup");   case "34":return("pagedown");   case "34":return("printcreen");   case "145":return("scrolllock");   case "19":return("pause");   case "27":return("esc");   case "12":return("middle");   case "13":return("\r\n");   case "112":return("f1");   case "113":return("f2");   case "114":return("f3");   case "115":return("f4");   case "116":return("f5");   case "117":return("f6");   case "118":return("f7");   case "119":return("f8");   case "120":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="100" id="a1"><input value="press d + b + x to focus on me." size="100" id="a2">