js中的键盘事件

Dear 丶 2022-09-17 12:25 205阅读 0赞

本文转自：http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html

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

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

不过并不止提交按钮会激发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 中则相当于点击。与他对比的是，inputtype=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对主副键盘的数字键敏感。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>键盘事件</title> <style type="text/css"> td \{ text-align:center; \} </style> <script type="text/javascript"> window.οnlοad=function()\{ document.onkeydown = showKeyDown document.onkeyup = showKeyUp document.onkeypress = showKeyPress \} function showKeyDown(evt) \{ evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").innerHTML = 0 document.getElementById("upKeyCode").innerHTML = 0 document.getElementById("pressCharCode").innerHTML = 0 document.getElementById("upCharCode").innerHTML = 0 restoreModifiers("") restoreModifiers("Down") restoreModifiers("Up") document.getElementById("downKeyCode").innerHTML = evt.keyCode if (evt.charCode) \{ document.getElementById("downCharCode").innerHTML = evt.charCode \} showModifiers("Down", evt) \} function showKeyUp(evt) \{ evt = (evt) ? evt : window.event document.getElementById("upKeyCode").innerHTML = evt.keyCode if (evt.charCode) \{ document.getElementById("upCharCode").innerHTML = evt.charCode \} showModifiers("Up", evt) return false \} function showKeyPress(evt) \{ evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").innerHTML = evt.keyCode if (evt.charCode) \{ document.getElementById("pressCharCode").innerHTML = evt.charCode \} showModifiers("", evt) return false \} function showModifiers(ext, evt) \{ restoreModifiers(ext) if (evt.shiftKey) \{ document.getElementById("shift" + ext).style.backgroundColor = "\#ff0000" \} if (evt.ctrlKey) \{ document.getElementById("ctrl" + ext).style.backgroundColor = "\#00ff00" \} if (evt.altKey) \{ document.getElementById("alt" + ext).style.backgroundColor = "\#0000ff" \} \} function restoreModifiers(ext) \{ document.getElementById("shift" + ext).style.backgroundColor = "\#ffffff" document.getElementById("ctrl" + ext).style.backgroundColor = "\#ffffff" document.getElementById("alt" + ext).style.backgroundColor = "\#ffffff" \} </script> </head> <body> <h3>键盘事件</h3> <form> <table border=1 cellpadding="2" cellspacing="0"> <tr> <th></th> <th>onKeyDown</th> <th>onKeyPress</th> <th>onKeyUp</th> </tr> <tr> <th>Key Codes</th> <td id="downKeyCode">0</td> <td id="pressKeyCode">0</td> <td id="upKeyCode">0</td> </tr> <tr> <th>Char Codes (IE5/Mac; NN6)</th> <td id="downCharCode">0</td> <td id="pressCharCode">0</td> <td id="upCharCode">0</td> </tr> <tr> <th rowspan="3">Modifier Keys</th> <td><span id="shiftdown">Shift</span></td> <td><span id="shift">Shift</span></td> <td><span id="shiftUp">Shift</span></td> </tr> <tr> <td><span id="ctrlDown">Ctrl</span></td> <td><span id="ctrl">Ctrl</span></td> <td><span id="ctrlUp">Ctrl</span></td> </tr> <tr> <td><span id="altdown">Alt</span></td> <td><span id="alt">Alt</span></td> <td><span id="altUp">Alt</span></td> </tr> </table> </form> </body> </html>

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

`01.` `function``getKey(e){`

`02.` `    ``e = e || window.event;`

`03.` `    ``var``keycode = e.which ? e.which : e.keyCode;`

`04.` `    ``if``(keycode == 13 || keycode == 108){``//如果按下ENTER键`

`05.` `       ``//在这里设置你想绑定的事件`

`06.` `    ``}`

`07.` `}`

`08.`

`09.` `// 把keyup事件绑定到document中`

`10.` `function``listenKey (  ) {`

`11.` `    ``if``(document.addEventListener) {`

`12.` `        ``document.addEventListener(``"keyup"``,getKey,``false``);`

`13.` `    ``}``else` `if` `(document.attachEvent) {`

`14.` `        ``document.attachEvent(``"onkeyup"``,getKey);`

`15.` `    ``}``else` `{`

`16.` `        ``document.onkeyup = getKey;`

`17.` `    ``}`

`18.` `}`

最后附上，键盘中所有按钮的keycode一览

<table>           
 <thead> 
  <tr> 
   <th colspan="8">字母和数字键的键码值(keyCode)</th> 
  </tr> 
  <tr> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>65</td> 
   <td>J</td> 
   <td>74</td> 
   <td>S</td> 
   <td>83</td> 
   <td>1</td> 
   <td>49</td> 
  </tr> 
  <tr> 
   <td>B</td> 
   <td>66</td> 
   <td>K</td> 
   <td>75</td> 
   <td>T</td> 
   <td>84</td> 
   <td>2</td> 
   <td>50</td> 
  </tr> 
  <tr> 
   <td>C</td> 
   <td>67</td> 
   <td>L</td> 
   <td>76</td> 
   <td>U</td> 
   <td>85</td> 
   <td>3</td> 
   <td>51</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>68</td> 
   <td>M</td> 
   <td>77</td> 
   <td>V</td> 
   <td>86</td> 
   <td>4</td> 
   <td>52</td> 
  </tr> 
  <tr> 
   <td>E</td> 
   <td>69</td> 
   <td>N</td> 
   <td>78</td> 
   <td>W</td> 
   <td>87</td> 
   <td>5</td> 
   <td>53</td> 
  </tr> 
  <tr> 
   <td>F</td> 
   <td>70</td> 
   <td>O</td> 
   <td>79</td> 
   <td>X</td> 
   <td>88</td> 
   <td>6</td> 
   <td>54</td> 
  </tr> 
  <tr> 
   <td>G</td> 
   <td>71</td> 
   <td>P</td> 
   <td>80</td> 
   <td>Y</td> 
   <td>89</td> 
   <td>7</td> 
   <td>55</td> 
  </tr> 
  <tr> 
   <td>H</td> 
   <td>72</td> 
   <td>Q</td> 
   <td>81</td> 
   <td>Z</td> 
   <td>90</td> 
   <td>8</td> 
   <td>56</td> 
  </tr> 
  <tr> 
   <td>I</td> 
   <td>73</td> 
   <td>R</td> 
   <td>82</td> 
   <td>0</td> 
   <td>48</td> 
   <td>9</td> 
   <td>57</td> 
  </tr> 
 </tbody> 
</table>

<table>           
 <thead> 
  <tr> 
   <th colspan="4">数字键盘上的键的键码值(keyCode)</th> 
   <th colspan="4">功能键键码值(keyCode)</th> 
  </tr> 
  <tr> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>96</td> 
   <td>8</td> 
   <td>104</td> 
   <td>F1</td> 
   <td>112</td> 
   <td>F7</td> 
   <td>118</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>97</td> 
   <td>9</td> 
   <td>105</td> 
   <td>F2</td> 
   <td>113</td> 
   <td>F8</td> 
   <td>119</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>98</td> 
   <td>*</td> 
   <td>106</td> 
   <td>F3</td> 
   <td>114</td> 
   <td>F9</td> 
   <td>120</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>99</td> 
   <td>+</td> 
   <td>107</td> 
   <td>F4</td> 
   <td>115</td> 
   <td>F10</td> 
   <td>121</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>100</td> 
   <td>Enter</td> 
   <td>108</td> 
   <td>F5</td> 
   <td>116</td> 
   <td>F11</td> 
   <td>122</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>101</td> 
   <td>-</td> 
   <td>109</td> 
   <td>F6</td> 
   <td>117</td> 
   <td>F12</td> 
   <td>123</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td>102</td> 
   <td>.</td> 
   <td>110</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td>103</td> 
   <td>/</td> 
   <td>111</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table>           
 <thead> 
  <tr> 
   <th colspan="8">控制键键码值(keyCode)</th> 
  </tr> 
  <tr> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
   <th style="color:#003399">按键</th> 
   <th style="color:#996600">键码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>BackSpace</td> 
   <td>8</td> 
   <td>Esc</td> 
   <td>27</td> 
   <td>Right Arrow</td> 
   <td>39</td> 
   <td>-_</td> 
   <td>189</td> 
  </tr> 
  <tr> 
   <td>Tab</td> 
   <td>9</td> 
   <td>Spacebar</td> 
   <td>32</td> 
   <td>Down Arrow</td> 
   <td>40</td> 
   <td>.&gt;</td> 
   <td>190</td> 
  </tr> 
  <tr> 
   <td>Clear</td> 
   <td>12</td> 
   <td>Page Up</td> 
   <td>33</td> 
   <td>Insert</td> 
   <td>45</td> 
   <td>/?</td> 
   <td>191</td> 
  </tr> 
  <tr> 
   <td>Enter</td> 
   <td>13</td> 
   <td>Page Down</td> 
   <td>34</td> 
   <td>Delete</td> 
   <td>46</td> 
   <td>`~</td> 
   <td>192</td> 
  </tr> 
  <tr> 
   <td>Shift</td> 
   <td>16</td> 
   <td>End</td> 
   <td>35</td> 
   <td>Num Lock</td> 
   <td>144</td> 
   <td>[{ </td> 
   <td>219</td> 
  </tr> 
  <tr> 
   <td>Control</td> 
   <td>17</td> 
   <td>Home</td> 
   <td>36</td> 
   <td>;:</td> 
   <td>186</td> 
   <td>/|</td> 
   <td>220</td> 
  </tr> 
  <tr> 
   <td>Alt</td> 
   <td>18</td> 
   <td>Left Arrow</td> 
   <td>37</td> 
   <td>=+</td> 
   <td>187</td> 
   <td>]}</td> 
   <td>221</td> 
  </tr> 
  <tr> 
   <td>Cape Lock</td> 
   <td>20</td> 
   <td>Up A</td> 
  </tr> 
 </tbody> 
</table>