这不是什么原创,是我跟据OReilly.JavaScript.The.Definitive.Guide.5th.Edition.Aug.2006中的例子修改的。
现在有几个问题:
IE,FF下控制的很好,
Opera下,不会把系统快捷键给屏蔽掉。Safari下,如果你按下的是系统快捷键,就不会响应给自定程序。CTRL+S不是safari的快捷键,可以看ctrl+s可以响应,ctrl+a,ctrl+d等,就得不到
水平有限,暂时(也可能永远)找不到解决办法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js自定义快捷,IE,FF有良好的支持 - 中国asp之家</title> <script language="javascript" type="text/javascript"> /*-------------------------------------------------------- Opera下,不会把系统快捷键给屏蔽掉。 Safari下,如果你按下的是系统快捷键,就不会响应给自定程序。 CTRL+S不是safari的快捷键,可以看ctrl+s可以响应,ctrl+a,ctrl+d等,就得不到响应。 ---------------------------------------------------------*/ function Browser(){ var d_ = document,n_ = navigator,t_ = this,s_= screen; var b = n_.appName; var ua = n_.userAgent.toLowerCase(); t_.name = "Unknow"; t_.safari = ua.indexOf("safari")>-1; // always check for safari & opera t_.opera = ua.indexOf("opera")>-1; // before ns or ie t_.firefox = !t_.safari && ua.indexOf('firefox')>-1; // check for gecko engine t_.ns = !t_.firefox && !t_.opera && !t_.safari && (b=="Netscape"); t_.ie = !t_.opera && (b=="Microsoft Internet Explorer"); t_.name = (t_.ie ? "IE" : (t_.firefox ? "Firefox" : (t_.ns ? "Netscape" : (t_.opera ? "Opera" : (t_.safari ? "Safari" : "Unknow"))))); } function JShortCut(){ var self; var map = {}; var brw = new Browser(); this.bind = function(sc,func,doSysSc){ map[sc] = func; if(doSysSc === false) map[sc].doSysShortCut = false; } this.unBind = function(sc){ delete map[sc]; } this.listen = function(elm){ if(typeof elm == "string") elm = document.getElementById(elm); if (elm.addEventListener) { //Safari,opera,firefox elm.addEventListener("keydown", dispatch, false); elm.addEventListener("keypress", dispatch, false); } else if (elm.attachEvent) { //IE elm.attachEvent("onkeydown", dispatch); elm.attachEvent("onkeypress", dispatch); } else { elm.onkeydown = element.onkeypress = dispatch; } } var dispatch = function (evt){ evt = evt || event; if (evt.type == "keydown") { var code = evt.keyCode; if (code == 16 || code == 17 || code == 18) return; keyname = JShortCut.KEYS[code]; var modifiers = ""; if (!keyname && (evt.altKey || evt.ctrlKey)) keyname = Keymap.keyCodeToPrintableChar[code]; if (keyname) { if (evt.altKey) modifiers += "alt_"; if (evt.ctrlKey) modifiers += "ctrl_"; if (evt.shiftKey) modifiers += "shift_"; }else{ return; } }else if (evt.type == "keypress") { if (evt.altKey || evt.ctrlKey) return; if (evt.charCode != undefined && evt.charCode == 0) return; var code = evt.charCode || evt.keyCode; keyname=String.fromCharCode(code); var lowercase = keyname.toLowerCase( ); if (keyname != lowercase) { keyname = lowercase; // Use the lowercase form of the name modifiers = "shift_"; // and add the shift modifier. } } var shortCut = modifiers+keyname; var target = evt.srcElement || evt.target; var func = map[shortCut]; if(typeof func == "function"){ func(target,shortCut,evt); if(func.doSysShortCut === false){ switch(brw.name){ case "IE": evt.returnValue = false; evt.keyCode = 0; break; case "Firefox": evt.preventDefault(); break; case "Opera": evt.returnValue = false; evt.preventDefault(); break; case "Safari": evt.preventDefault(); evt.returnValue = false; //for(o in evt) // document.write(o," ",typeof(eval("evt." + o))," = ",eval("evt." + o),"<br />"); } } } //return false; } } JShortCut.KEYS = { 48:"0", 49:"1", 50:"2", 51:"3", 52:"4", 53:"5", 54:"6", 55:"7", 56:"8", 57:"9", 59:";", 61:"=", 65:"a", 66:"b", 67:"c", 68:"d", 69:"e", 70:"f", 71:"g", 72:"h", 73:"i", 74:"j", 75:"k", 76:"l", 77:"m", 78:"n", 79:"o", 80:"p", 81:"q", 82:"r", 83:"s", 84:"t", 85:"u", 86:"v", 87:"w", 88:"x", 89:"y", 90:"z", 107:"+", 109:"-", 110:".", 188:",", 190:".", 191:"/", 192:"'", 219:"[", 220:"\\", 221:"]", 222:"\"", 8:"backspace", 9:"tab", 13:"return", 19:"pause", 27:"escape", 32:"space", 33:"pageup", 34:"pagedown", 35:"end", 36:"home", 37:"left", 38:"up", 39:"right", 40:"down", 44:"printscreen", 45:"insert", 46:"delete", 112:"f1", 113:"f2", 114:"f3", 115:"f4", 116:"f5", 117:"f6", 118:"f7", 119:"f8", 120:"f9", 121:"f10", 122:"f11", 123:"f12", 144:"numlock", 145:"scrolllock" }; </script> </head> <body> <div id="aa"></div> <p>Opera下,不会把系统快捷键给屏蔽掉。<br /> Safari下,如果你按下的是系统快捷键,就不会响应给自定程序。<br /> CTRL+S不是safari的快捷键,可以看ctrl+s可以响应,ctrl+a,ctrl+d等,就得不到响应。</p> <p>function doSys(target,shortCut,evt){<br /> document.getElementById("aa").innerHTML = shortCut;<br /> }</p> <p>var sc = new JShortCut();<br /> sc.bind("ctrl_a",doSys,false);<br /> sc.bind("ctrl_n",doSys,false);<br /> sc.bind("ctrl_p",doSys,false);<br /> sc.bind("ctrl_o",doSys,false);<br /> sc.bind("ctrl_s",doSys,false);<br /> sc.bind("ctrl_w",doSys,false);<br /> sc.bind("alt_f4",doSys,false);<br /> sc.bind("ctrl_f",doSys,false);<br /> sc.bind("ctrl_y",doSys,false);<br /> sc.bind("f1",doSys,false);<br /> sc.bind("f5",doSys,false);<br /> sc.bind("a",doSys);<br /> sc.listen(document);</p> </body> </html> <script language="javascript" type="text/javascript"> function doSys(target,shortCut,evt){ document.getElementById("aa").innerHTML = shortCut; } var sc = new JShortCut(); sc.bind("ctrl_a",doSys,false); sc.bind("ctrl_n",doSys,false); sc.bind("ctrl_p",doSys,false); sc.bind("ctrl_o",doSys,false); sc.bind("ctrl_s",doSys,false); sc.bind("ctrl_w",doSys,false); sc.bind("alt_f4",doSys,false); sc.bind("ctrl_f",doSys,false); sc.bind("ctrl_y",doSys,false); sc.bind("f1",doSys,false); sc.bind("f5",doSys,false); sc.bind("a",doSys); sc.listen(document); </script> [提示:你可先修改部分代码,再按运行]