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

小编精心整理的网页设计或制作中与键盘相关的一些技术希望大家喜欢，觉得好的亲们记得收藏起来哦！您的支持就是小编更新的动力~

从最基础的说起。本教程中，所有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( eset button is clicked);"/()

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

1. 属性。

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 for="nnn1" accesskey="d"Aud/udress/labelinput id="nnn1" value="press alt + d you can focus me." size="100" 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=？ srcEle=？ eType=+&&++& Code:"++&;

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

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");

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");(&&)}}} value="press a + b + c to focus on me." size="100" id="a1"input value="press d + b + x to focus on me." size="

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

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");(&&)}}} 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 全部选择 提示：你可先修改部分代码，再按运行]