网页与键盘 - 站长资源库


答案：从最基础的说起。本教程中，所有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 
<!-- Author: Hutia -->
<form onsubmit="alert('I am submiting');return false;">
<input value="focus me, the press enter key or esc key" size=100>

<input type=submit onclick="alert('submit button is clicked');">
<input type=reset onclick="alert('reset button is clicked');">
</form>
<script>document.forms[0].elements[0].focus();</script>
  [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 中都是点击。 
<!-- 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"> 
<hr> 
<h4>Use Label:</h4> 
<label for="nnn1" accesskey="d">A<u>d</u>dress</label> 
<input id="nnn1" value="press alt + d you can focus me." size="100"> 
<hr> 
<h4>Link:</h4> 
press alt + f to focus me.
 
<input type=checkbox accesskey="w" href=>press alt + w to focus me.

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

2. 然后就需要编程了 

2.1 简单的按键捕获。 
2.1.1 事件有 onkeydown, onkeypress, onkeyup 
2.1.2 IE 与 FF 的 事件写法不同，请学习下面的代码 
<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 onkeydown="chkKey(arguments[0]);" onkeyup="chkKey(arguments[0]);" onkeypress="chkKey(arguments[0]);" style="width:98%; height:400px;overflow:auto;"> 
</textarea>

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

2.2 因为事件会冒泡，所以，可以在 document 上捕获按键来自定义快捷键。
<script> 
// 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 "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":ret</pre><p>上一个：<a href="/show/ffad327e2e510fee.htm">脚本写的IE右键助手</a><br/>下一个：<a href="/show/4345b8a0640f0b6b.htm">繁简字转换功能</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/09fcf25e402fd444.htm"><img src='/upload/20121013/qq_logo.gif' width=105 height=105><br/>腾讯QQ网页在线客服，随网页滚动条上下移动的效果一</a></li><li><a href="/show/ef157a6d597587cd.htm"><img src='/upload/20121013/dot.gif' width=105 height=105><br/>使用onbeforeunload属性后的副作用</a></li><li><a href="/show/d6830c4b40b3b6de.htm"><img src='/upload/2013111520/20120629024221519.jpg' width=105 height=105><br/>js计算表格的值(例如购物车中)</a></li><li><a href="/show/07bedc94a5b11fee.htm"><img src='/upload/2013111617/20130126105741284.png' width=105 height=105><br/>[cocos2d-x从c++到js]01：迎接脚本时代的到来</a></li><li><a href="/show/b6b488bbcb5abf24.htm"><img src='/upload/2013111604/2008052123272603.gif' width=105 height=105><br/>轻松使用JSP生成饼图</a></li><li><a href="/show/22b56d99e5956b4a.htm"><img src='/upload/2013111520/20120813050839822.jpg' width=105 height=105><br/>给Extjs grid中的列自定义渲染方式</a></li></ul></div></div>
  <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd><dd><a target="_blank" href="/show/3aa8e41c89689f54.htm">JS怎样操作PHP中的参数</a></dd><dd><a target="_blank" href="/show/b4b8714c029b37a6.htm">js 怎么在一打开页面就加载这个函数。</a></dd><dd><a target="_blank" href="/show/8c57097425b52fc7.htm">Date.parse()的问题(js)</a></dd><dd><a target="_blank" href="/show/012152bfb53fdf04.htm"><script src="/{maxcms:sitepath}js/common.js"></script>是什么意思</a></dd></dl></div>
</div>
<div id="zykleft">
  <div class="leftm">
    <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a>
    	<div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div>
      <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div>
    <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>请访问www.zzzyk.com 试试</dl>
  </div>
  <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div>
  <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div>
</div></div>
<div class="clear"></div>
<div class="bdshare">
  <script type="text/javascript" src="/js/share.js"></script>
</div>
<div class="clear"></div>
<div class="foot">CopyRight © 2012 站长网 编程知识问答 <a href="http://www.zzzyk.com">www.zzzyk.com</a> All Rights Reserved<br/>部份技术文章来自网络，<script type="text/javascript" src="/images/my.js"></script>
</div>
</body>
</html>