当前位置: 代码迷 >> JavaScript >> JavaScript 键盘事件小结
  详细解决方案

JavaScript 键盘事件小结

热度:567   发布时间:2012-11-01 11:11:32.0
JavaScript 键盘事件总结

在进入正题前,我们看一下浏览器对于键盘的一些默认事件,这有助于我们用javascript截获键盘事件。

在form中, submit的快捷键是 enter,reset的快捷键是 esc。不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit。

  1. <html dir="ltr" lang="zh-CN">
  2. ? <head>
  3. ?? ???<meta charset="utf-8"/>
  4. ?? ???<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  5. ?? ???<title>键盘事件</title>

  6. ? </head>
  7. ? <body>
  8. ?? ???<h3>键盘事件</h3>

  9. ?? ???<form onsubmit="alert('Form is submiting');return false;">
  10. ?? ?? ?? ?<p><input type="text" value="将焦点聚焦于文本域中,然后按回车键或Esc键" /></p>
  11. ?? ?? ?? ?<p><input type="submit" onclick="alert('submit button is clicked');" value="submit"/>
  12. ?? ?? ?? ?<input type="reset" onclick="alert('reset button is clicked');" value="reset" />
  13. ?? ?? ?? ?</p>
  14. ?? ???</form>
  15. ? </body>
  16. </html>
复制代码

不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下:

?1. 如果表单里有一个type="submit"的按钮,回车键生效。
?2. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效。
?3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
?4. 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
?5. type="image"的input,效果等同于type="submit"。不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

除了在按钮中绑定键盘事件外,浏览器还有一个accesskey 属性来指定链接的快捷键。注意 accesskey 的设置如果和浏览器的菜单相同,会优先于菜单。在IE中,快捷键是 alt + 设置的键值,FF是Alt+Shift+ 设置的键值。 在IE 中,a元素的 accesskey 只是使焦点转移到链接上,并不等同于点击,FF 中则相当于点击。与他对比的是,input type=checkbox 的 accesskey 效果不论在IE 还是 FF 中都是点击。另外,我们还可以配合label标签来加强语义,个人是十分推荐这种做法的。

剩下的就需要编程了。javascript事件主要通过以下三个事件来捕获键盘事件:onkeydown,onkeypress与onkeyup。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。

onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。

由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup 键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、 onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和副键盘数字键的,而onkeydown、onkeyup 的keyCode对主副键盘的数字键敏感。

  1. <!doctype html>
  2. <html dir="ltr" lang="zh-CN">
  3. ? <head>
  4. ?? ???<meta charset="utf-8"/>
  5. ?? ???<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6. ?? ???<title>键盘事件</title>
  7. ?? ???<style type="text/css">
  8. ?? ?? ?? ?td {
  9. ?? ?? ?? ?? ? text-align:center;
  10. ?? ?? ?? ?}
  11. ?? ???</style>
  12. ?? ???<script type="text/javascript">
  13. ?? ?? ?? ?window.onload=function(){
  14. ?? ?? ?? ?? ? document.onkeydown = showKeyDown
  15. ?? ?? ?? ?? ? document.onkeyup = showKeyUp
  16. ?? ?? ?? ?? ? document.onkeypress = showKeyPress
  17. ?? ?? ?? ?}
  18. ?? ?? ?? ?function showKeyDown(evt) {
  19. ?? ?? ?? ?? ? evt = (evt) ? evt : window.event
  20. ?? ?? ?? ?? ? document.getElementById("pressKeyCode").innerHTML = 0
  21. ?? ?? ?? ?? ? document.getElementById("upKeyCode").innerHTML = 0
  22. ?? ?? ?? ?? ? document.getElementById("pressCharCode").innerHTML = 0
  23. ?? ?? ?? ?? ? document.getElementById("upCharCode").innerHTML = 0
  24. ?? ?? ?? ?? ? restoreModifiers("")
  25. ?? ?? ?? ?? ? restoreModifiers("Down")
  26. ?? ?? ?? ?? ? restoreModifiers("Up")
  27. ?? ?? ?? ?? ? document.getElementById("downKeyCode").innerHTML = evt.keyCode
  28. ?? ?? ?? ?? ? if (evt.charCode) {
  29. ?? ?? ?? ?? ?? ???document.getElementById("downCharCode").innerHTML = evt.charCode
  30. ?? ?? ?? ?? ? }
  31. ?? ?? ?? ?? ? showModifiers("Down", evt)
  32. ?? ?? ?? ?}
  33. ?? ?? ?? ?function showKeyUp(evt) {
  34. ?? ?? ?? ?? ? evt = (evt) ? evt : window.event
  35. ?? ?? ?? ?? ? document.getElementById("upKeyCode").innerHTML = evt.keyCode
  36. ?? ?? ?? ?? ? if (evt.charCode) {
  37. ?? ?? ?? ?? ?? ???document.getElementById("upCharCode").innerHTML = evt.charCode
  38. ?? ?? ?? ?? ? }
  39. ?? ?? ?? ?? ? showModifiers("Up", evt)
  40. ?? ?? ?? ?? ? return false
  41. ?? ?? ?? ?}
  42. ?? ?? ?? ?function showKeyPress(evt) {
  43. ?? ?? ?? ?? ? evt = (evt) ? evt : window.event
  44. ?? ?? ?? ?? ? document.getElementById("pressKeyCode").innerHTML = evt.keyCode
  45. ?? ?? ?? ?? ? if (evt.charCode) {
  46. ?? ?? ?? ?? ?? ???document.getElementById("pressCharCode").innerHTML = evt.charCode
  47. ?? ?? ?? ?? ? }
  48. ?? ?? ?? ?? ? showModifiers("", evt)
  49. ?? ?? ?? ?? ? return false
  50. ?? ?? ?? ?}
  51. ?? ?? ?? ?function showModifiers(ext, evt) {
  52. ?? ?? ?? ?? ? restoreModifiers(ext)
  53. ?? ?? ?? ?? ? if (evt.shiftKey) {
  54. ?? ?? ?? ?? ?? ???document.getElementById("shift" + ext).style.backgroundColor = "#ff0000"
  55. ?? ?? ?? ?? ? }
  56. ?? ?? ?? ?? ? if (evt.ctrlKey) {
  57. ?? ?? ?? ?? ?? ???document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00"
  58. ?? ?? ?? ?? ? }
  59. ?? ?? ?? ?? ? if (evt.altKey) {
  60. ?? ?? ?? ?? ?? ???document.getElementById("alt" + ext).style.backgroundColor = "#0000ff"
  61. ?? ?? ?? ?? ? }
  62. ?? ?? ?? ?}
  63. ?? ?? ?? ?function restoreModifiers(ext) {
  64. ?? ?? ?? ?? ? document.getElementById("shift" + ext).style.backgroundColor = "#ffffff"
  65. ?? ?? ?? ?? ? document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff"
  66. ?? ?? ?? ?? ? document.getElementById("alt" + ext).style.backgroundColor = "#ffffff"
  67. ?? ?? ?? ?}
  68. ?? ???</script>
  69. ? </head>
  70. ? <body>
  71. ?? ???<h3>键盘事件</h3>
  72. ?? ???<form>
  73. ?? ?? ?? ?<table border=1 cellpadding="2" cellspacing="0">
  74. ?? ?? ?? ?? ? <tr>
  75. ?? ?? ?? ?? ?? ???<th></th>
  76. ?? ?? ?? ?? ?? ???<th>onKeyDown</th>
  77. ?? ?? ?? ?? ?? ???<th>onKeyPress</th>
  78. ?? ?? ?? ?? ?? ???<th>onKeyUp</th>
  79. ?? ?? ?? ?? ? </tr>
  80. ?? ?? ?? ?? ? <tr>
  81. ?? ?? ?? ?? ?? ???<th>Key Codes</th>
  82. ?? ?? ?? ?? ?? ???<td id="downKeyCode">0</td>
  83. ?? ?? ?? ?? ?? ???<td id="pressKeyCode">0</td>
  84. ?? ?? ?? ?? ?? ???<td id="upKeyCode">0</td>
  85. ?? ?? ?? ?? ? </tr>
  86. ?? ?? ?? ?? ? <tr>
  87. ?? ?? ?? ?? ?? ???<th>Char Codes (IE5/Mac; NN6)</th>
  88. ?? ?? ?? ?? ?? ???<td id="downCharCode">0</td>
  89. ?? ?? ?? ?? ?? ???<td id="pressCharCode">0</td>
  90. ?? ?? ?? ?? ?? ???<td id="upCharCode">0</td>
  91. ?? ?? ?? ?? ? </tr>
  92. ?? ?? ?? ?? ? <tr>
  93. ?? ?? ?? ?? ?? ???<th rowspan="3">Modifier Keys</th>
  94. ?? ?? ?? ?? ?? ???<td><span id="shiftdown">Shift</span></td>
  95. ?? ?? ?? ?? ?? ???<td><span id="shift">Shift</span></td>
  96. ?? ?? ?? ?? ?? ???<td><span id="shiftUp">Shift</span></td>
  97. ?? ?? ?? ?? ? </tr>
  98. ?? ?? ?? ?? ? <tr>
  99. ?? ?? ?? ?? ?? ???<td><span id="ctrlDown">Ctrl</span></td>
  100. ?? ?? ?? ?? ?? ???<td><span id="ctrl">Ctrl</span></td>
  101. ?? ?? ?? ?? ?? ???<td><span id="ctrlUp">Ctrl</span></td>
  102. ?? ?? ?? ?? ? </tr>
  103. ?? ?? ?? ?? ? <tr>
  104. ?? ?? ?? ?? ?? ???<td><span id="altdown">Alt</span></td>
  105. ?? ?? ?? ?? ?? ???<td><span id="alt">Alt</span></td>
  106. ?? ?? ?? ?? ?? ???<td><span id="altUp">Alt</span></td>
  107. ?? ?? ?? ?? ? </tr>
  108. ?? ?? ?? ?</table>
  109. ?? ???</form>
  110. ? </body>
  111. </html>

我们可以利用以下脚本来监听网页中的键盘事件,一旦用户按下Enter键便开始你绑定的事件。

  1. function getKey(e){
  2. ? e = e || window.event;
  3. ? var keycode = e.which ? e.which : e.keyCode;
  4. ? if(keycode == 13 || keycode == 108){ //如果按下ENTER键
  5. ?? ? //在这里设置你想绑定的事件
  6. ? }
  7. }

  8. // 把keyup事件绑定到document中
  9. function listenKey (?) {
  10. ? if (document.addEventListener) {
  11. ?? ???document.addEventListener("keyup",getKey,false);
  12. ? } else if (document.attachEvent) {
  13. ?? ???document.attachEvent("onkeyup",getKey);
  14. ? } else {
  15. ?? ???document.onkeyup = getKey;
  16. ? }
  17. }
  相关解决方案