键盘监听事件

￡神魔★判官ぃ 2022-03-28 13:57 264阅读 0赞

###### *最新更新时间：2019年1月10日17:36:59* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：键盘事件、键盘对象

#### 键盘-键码值 ####

<table> 
 <thead> 
  <tr> 
   <th>按键</th> 
   <th>键码</th> 
   <th>键区</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>BackSpace</td> 
   <td>8</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>Tab</td> 
   <td>9</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>Shift</td> 
   <td>16</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>Ctrl</td> 
   <td>17</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>Alt</td> 
   <td>18</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>CapsLock</td> 
   <td>20</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>Esc</td> 
   <td>27</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>0</td> 
   <td>48</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>…</td> 
   <td>…</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>57</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>A</td> 
   <td>65</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>…</td> 
   <td>…</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>Z</td> 
   <td>90</td> 
   <td>主键盘区</td> 
  </tr> 
  <tr> 
   <td>0</td> 
   <td>96</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>…</td> 
   <td>…</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>105</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>*</td> 
   <td>106</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>+</td> 
   <td>107</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>Enter</td> 
   <td>108</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>109</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>.</td> 
   <td>110</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>/</td> 
   <td>111</td> 
   <td>小键盘区</td> 
  </tr> 
  <tr> 
   <td>F1</td> 
   <td>112</td> 
   <td>上键盘区</td> 
  </tr> 
  <tr> 
   <td>…</td> 
   <td>…</td> 
   <td>上键盘区</td> 
  </tr> 
  <tr> 
   <td>F12</td> 
   <td>123</td> 
   <td>上键盘区</td> 
  </tr> 
 </tbody> 
</table>

#### 原生事件 ####

> 事件优先级：onkeydown > onkeypress > onkeyup

//全局监听-按下按键
    document.onkeydown = function(e) { 
    	if ( e.keyCode === 65){  
    		console.log("A")
    	} 
    	if ( e.ctrlKey ||  e.keyCode === 17){  
    		console.log("Ctrl")
    	} 
    	if ( e.ctrlKey && e.keyCode === 67){  
    		console.log("Ctrl + C")
    	} 
    }; 
    //全局监听-松开按键
    document.onkeyup = function(e) { 
    	//do something
    }; 
    //全局监听-按下并松开按键
    document.onkeydown = function(e) { 
    	//do something
    }; 
    //IE浏览器捕获事件对象用window.event，因此兼容性方案如下
    document.onkeydown = function(e) { 
    	var e = e || window.event;
    	//do something
    };

#### 获取键码转换为字符 ####

document.onkeyup = function(e) { 
    	var e = e || window.event;
    	var str = String.fromCharCode(e.keyCode)
    	console.log(str)
    };

#### 按键对象event详解 ####

<table> 
 <thead> 
  <tr> 
   <th>key</th> 
   <th>value</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>altKey</td> 
   <td>true/false</td> 
   <td>是否按下Alt键</td> 
  </tr> 
  <tr> 
   <td>charCode</td> 
   <td>0</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>code</td> 
   <td>“Numpad1” “ControlLeft” “F1” “Escape”</td> 
   <td>键名</td> 
  </tr> 
  <tr> 
   <td>ctrlKey</td> 
   <td>true/false</td> 
   <td>是否按下Ctrl键</td> 
  </tr> 
  <tr> 
   <td>key</td> 
   <td>1 “Control” “F1” “Escape”</td> 
   <td>键名</td> 
  </tr> 
  <tr> 
   <td>keyCode</td> 
   <td>97</td> 
   <td>键码</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>0/1/2/3</td> 
   <td>键盘区域</td> 
  </tr> 
  <tr> 
   <td>shiftKey</td> 
   <td>true/false</td> 
   <td>是否按下Shift键</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>“keydown”</td> 
   <td>是否按下Alt键</td> 
  </tr> 
  <tr> 
   <td>which</td> 
   <td>97</td> 
   <td>键码</td> 
  </tr> 
 </tbody> 
</table>

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460