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

编程部分

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></div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code1')" type=button value=运行代码>  <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code1) type=button value=复制到剪贴板 name=Submit>  <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code1) type=button value=另存代码>  </P><P><SPAN></SPAN><STRONG>1.2. Accesskey 属性。<BR>1.2.1</STRONG> 注意 accesskey 的设置如果和浏览器的菜单相同，会优先于菜单。使用时的快捷键是 alt   设置的键值<BR><STRONG>1.2.2</STRONG> label 的 for 属性配合 accesskey 效果较好<BR><STRONG>1.2.3</STRONG> 在IE 中，Link 对象的 accesskey 只是使 焦点转移到 link 上，并不等同于点击，FF 中则相当于点击. 与他对比的是，input type=checkbox 的 accesskey 效果不论在IE 还是 FF 中都是点击。</P><P>运行代码框</P><P align=center><TEXTAREA class=fm id=code2 style="WIDTH: 557px; HEIGHT: 174px" rows=12 cols=87><!-- 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.</div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code2')" type=button value=运行代码>  <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code2) type=button value=复制到剪贴板 name=Submit>  <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code2) type=button value=另存代码> </P><P><SPAN></SPAN><STRONG>2. 然后就需要编程了</STRONG></P><P><STRONG>2.1 简单的按键捕获。<BR>2.1.1</STRONG> 事件有 onkeydown, onkeypress, onkeyup<BR><STRONG>2.1.2</STRONG> IE 与 FF 的 事件写法不同，请学习下面的代码：</P><P>运行代码框</P><P align=center><TEXTAREA class=fm id=code3 style="WIDTH: 555px; HEIGHT: 174px" rows=12 cols=87><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></div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code3')" type=button value=运行代码>  <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code3) type=button value=复制到剪贴板 name=Submit>  <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code3) type=button value=另存代码> </P><P><SPAN><STRONG>2.2 因为事件会冒泡，所以，可以在 document 上捕获按键来自定义快捷键。</STRONG></SPAN></P><P><SPAN><STRONG></STRONG></SPAN>运行代码框</P><P align=center><TEXTAREA class=fm id=code4 style="WIDTH: 553px; HEIGHT: 174px" rows=12 cols=87><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"></div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code4')" type=button value=运行代码>  <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code4) type=button value=复制到剪贴板 name=Submit>  <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code4) type=button value=另存代码>  </P><P><SPAN></SPAN>3. 为了满足fmt00的要求，特写下此段，希望 fmt00 能够喜欢，哈哈</P><P>运行代码框</P><P align=center><TEXTAREA class=fm id=code5 style="WIDTH: 557px; HEIGHT: 174px" rows=12 cols=87><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"></div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code5')" type=button value=运行代码>  <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code5) type=button value=复制到剪贴板 name=Submit>  <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code5) type=button value=另存代码>  </P></div>        

作者：gdgzboy@牛C网
地址：http://www.niuc.net/post/2669/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！