[原创][教程]网页与键盘

hutia 楼主

从最基础的说起。本教程中，所有IE 均指 WindowXP + IE 6.0, 所有 FF 均指 FF 1.5。
作者 Hutia, 转载请注明出处。

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: 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 "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: 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 "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">

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

fmt00

感谢hutia对我的帮助，学到了很多。

steppen

看看……

EraIT

写的很不错。收藏！

bjhaoyun

请教个问题，为什么我的键盘用keypress都能响应，用keyup、keydown有些键（比如O、L、S等）却没有反应呢

hutia 楼主

bjhaoyun在上个帖子中说

请教个问题，为什么我的键盘用keypress都能响应，用keyup、keydown有些键（比如O、L、S等）却没有反应呢

你的代码？

离不开网的鱼

您太牛了！大虾，能说说你学JS的经验之谈吗？菜鸟先谢了

hutia 楼主

承蒙楼上抬爱，在下愧不敢当....

学JS啊....多动手，多试试，多学多想即可

gerry1006

select 框怎么能像text那样有accesskey的动作？

hutia 楼主

一样的啊....

<!-- Author: Hutia --> Press alt + s to access the select: <select accesskey="s"><option>1</option><option>2</option></select>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

zhulei254

牛啊```

138520com

不错啊.我这网站上也有!呵呵

pincs

现在的网页真的快要还原到桌面时代了

michaelzhouh

想问哈,onkeydown="chkKey(arguments[0]);",的一个参数默认是event,但是如果我是页面加载完成后,用addEventListener绑定事件,那么event又该怎么作为参数传了呢?

xiangyuanjian

虽然说我不是很懂程序。但我觉得这个应该很有用。。。

lwkyy

存在兼容问题，不要～～

jiajia2005

不错，顶楼主~~~~~~~~~~~~~~`

sdjggb

我刚到的，来报个到

whiteleaf

晕死，06年的帖子你都挖出来。鬼吹灯看多了啊……
害我以为hutia出新东西了。

wolf2999

很好的东西。感谢分享。

omjne

真的是非常好的教程，看了之后学到很多，谢谢！