网页与键盘

从最基础的说起。本教程中，所有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

document.forms[0].elements[0].focus();
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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 中都是点击。

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.2 IE 与 FF 的 事件写法不同，请学习下面的代码

// 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;
}

[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("\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;

[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("\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;

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]