js監聽鍵盤

1.簡單版

<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 οnkeydοwn="chkKey(arguments[0]);" οnkeyup="chkKey(arguments[0]);" οnkeypress="chkKey(arguments[0]);" style="width:98%; height:400px;overflow:auto;">
</textarea>

 

 

2.快捷鍵版

<script>
// Author: Hutia
function chkKey(e){
 var e=window.event?window.event:e;
 
 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.οnkeydοwn=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">

 

 

簡單應用

<script>
// Author: Hutia
function chkKey(e){
 var e=window.event?window.event:e;
 if(e.ctrlKey&&e.altKey&&keyChar(e)=="1")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.keyCode.toString() == 49){
  return "1";
 }
}
document.documentElement.οnkeydοwn=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.組合鍵版

<script>
// Author: Hutia
var pressedKeys=new Array();
function chkKey(e){
 var e=window.event?window.event:e;
 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.οnkeydοwn=document.documentElement.οnkeyup=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">

 

出處：http://bbs.blueidea.com/viewthread.php?tid=2577861