网页设计或制作中与键盘相关的一些技术

【 tulaoshi.com - Web开发 】

从最基础的说起。本教程中，所有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=100brinput type=submit onclick="alert('submit button is clicked');"input type=reset onclick="alert('reset button is clicked');"/formscriptdocument.forms[0].elements[0].focus();/script

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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"hrh4Use Label:/h4label for="nnn1" accesskey="d"Aud/udress/labelinput id="nnn1" value="press alt + d you can focus me." size="100"hrh4Link:/h4a accesskey="f" href="#link" onclick="alert('Link is clicked.');"press alt + f to focus me./abrinput type=checkbox accesskey="w" href="#link" onclick="alert('Checkbox is clicked.');" /press alt + w to focus me.

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

2. 然后就需要编程了

2.1 简单的按键捕获。
2.1.1 事件有 onkeydown, onkeypress, onkeyup
2.1.2 IE 与 FF 的 事件写法不同，请学习下面的代码：

运行代码框

script// Author: Hutiafunction chkKey(e){var e=window.event？window.event:e;var srcEle=e.srcElement？e.srcElement:e.target;var eType=e.type;srcEle.value+="rnEvent:"+eType+";tKey Code:"+e.keyCode+"</p>ot;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":ret</p><p style="height:15px;padding:0"> </p><a href="https://www.tulaoshi.com/webkaifa/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）</a><p style="height:15px;padding:0"> </p><a href="https://www.tulaoshi.com/webkaifa/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）</a>urn("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");</p>rn("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;/scriptinput value="press a + b + c to focus on me." size="100" id="a1"input value="press d + b + x to focus on me." size="</p>ase "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("rn");case "112":return("f1");case "113":retu</p>eturn("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;/scriptinput 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"

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]