从最基础的说起。本教程中，所有IE均指WindowXP+IE6.0,所有FF均指FF1.5。
作者Hutia,转载请注明出处。
1.不用编程的部分
1.1Form中。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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
1.2.Accesskey属性。
1.2.1注意accesskey的设置如果和浏览器的菜单相同，会优先于菜单。使用时的快捷键是alt+设置的键值
1.2.2label的for属性配合accesskey效果较好
1.2.3在IE中，Link对象的accesskey只是使焦点转移到link上，并不等同于点击，FF中则相当于点击.与他对比的是，inputtype=checkbox的accesskey效果不论在IE还是FF中都是点击。
Use Label: Address Link: press alt + f to focus me. press alt + w to focus me.
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
2.然后就需要编程了
2.1简单的按键捕获。
2.1.1事件有onkeydown,onkeypress,onkeyup
2.1.2IE与FF的事件写法不同，请学习下面的代码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
2.2 因为事件会冒泡，所以，可以在 document 上捕获按键来自定义快捷键。
// Author: Hutia function 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 "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("rn"); 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("rn"); 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;
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
3.为了满足fmt00的要求，特写下此段，希望fmt00能够喜欢，哈哈
// Author: Hutia var 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 "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("rn"); 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("rn"); 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;
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
【网页与键盘】相关文章：