JS 获取和响应键盘按键事件

心已赠人 2022-06-02 12:08 416阅读 0赞

**场景：**

页面中需要设置快捷键。

下面Demo是组合按键按下事件，可直接使用，单个按键响应事件，只需要将 if 中的 按键值更改至需要的键位即可，该例子引用百度静态库的jquery资源，需要在联网环境下运行。

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>监听键盘按键Demo</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(
       function(){
       	document.onkeydown = function(){
        var oEvent = window.event;
        if (oEvent.ctrlKey && oEvent.altKey && oEvent.keyCode ==77) {
        		alert("刚刚按下的是 ctrl + alt + m 组合键");
        }
      }
    });
    </script>
    </head>
    </html>

**Jquery 键盘事件：**

1. keydown():

按键按下时，会触发该事件；

2. keyup();

按键按下松开时，会触发该事件；

3. keypress();

敲击按键时触发，我的理解是对同一个键按下，马上放开。

**使用：**

$(document).keydown(function(e){ 
    	console.log(e.keyCode);  //获取当前按键的键码
    });

获取到键码，我们就可以做对应的逻辑判断了。

$(document).keydown(function(event){ 
    	var e = event || window.event; 
    	var k = e.keyCode || e.which; 
    	switch(k) { 
    		case 37: 
    		//… 
    		break; 
    		case 39: 
    		//… 
    		break; 
    		} 
    		return false; 
    })

常用的键盘事 件对应的键码：

keyCode 8 = BackSpace BackSpace    
keyCode 9 = Tab Tab  
keyCode 12 = Clear  
keyCode 13 = Enter  
keyCode 16 = Shift\_L  
keyCode 17 = Control\_L  
keyCode 18 = Alt\_L  
keyCode 19 = Pause  
keyCode 20 = Caps\_Lock  
keyCode 27 = Escape Escape  
keyCode 32 = space  
keyCode 33 = Prior  
keyCode 34 = Next  
keyCode 35 = End  
keyCode 36 = Home  
keyCode 37 = Left  
keyCode 38 = Up  
keyCode 39 = Right  
keyCode 40 = Down  
keyCode 41 = Select  
keyCode 42 = Print  
keyCode 43 = Execute  
keyCode 45 = Insert  
keyCode 46 = Delete  
keyCode 47 = Help  
keyCode 48 = 0 equal braceright  
keyCode 49 = 1 exclam onesuperior  
keyCode 50 = 2 quotedbl twosuperior  
keyCode 51 = 3 section threesuperior  
keyCode 52 = 4 dollar  
keyCode 53 = 5 percent  
keyCode 54 = 6 ampersand  
keyCode 55 = 7 slash braceleft  
keyCode 56 = 8 parenleft bracketleft  
keyCode 57 = 9 parenright bracketright  
keyCode 65 = a A  
keyCode 66 = b B  
keyCode 67 = c C  
keyCode 68 = d D  
keyCode 69 = e E EuroSign  
keyCode 70 = f F  
keyCode 71 = g G  
keyCode 72 = h H  
keyCode 73 = i I  
keyCode 74 = j J  
keyCode 75 = k K  
keyCode 76 = l L  
keyCode 77 = m M mu  
keyCode 78 = n N  
keyCode 79 = o O  
keyCode 80 = p P  
keyCode 81 = q Q at  
keyCode 82 = r R  
keyCode 83 = s S  
keyCode 84 = t T  
keyCode 85 = u U  
keyCode 86 = v V  
keyCode 87 = w W  
keyCode 88 = x X  
keyCode 89 = y Y  
keyCode 90 = z Z  
keyCode 96 = KP\_0 KP\_0  
keyCode 97 = KP\_1 KP\_1  
keyCode 98 = KP\_2 KP\_2  
keyCode 99 = KP\_3 KP\_3  
keyCode 100 = KP\_4 KP\_4  
keyCode 101 = KP\_5 KP\_5  
keyCode 102 = KP\_6 KP\_6  
keyCode 103 = KP\_7 KP\_7  
keyCode 104 = KP\_8 KP\_8  
keyCode 105 = KP\_9 KP\_9  
keyCode 106 = KP\_Multiply KP\_Multiply  
keyCode 107 = KP\_Add KP\_Add  
keyCode 108 = KP\_Separator KP\_Separator  
keyCode 109 = KP\_Subtract KP\_Subtract  
keyCode 110 = KP\_Decimal KP\_Decimal  
keyCode 111 = KP\_Divide KP\_Divide  
keyCode 112 = F1  
keyCode 113 = F2  
keyCode 114 = F3  
keyCode 115 = F4  
keyCode 116 = F5  
keyCode 117 = F6  
keyCode 118 = F7  
keyCode 119 = F8  
keyCode 120 = F9  
keyCode 121 = F10  
keyCode 122 = F11  
keyCode 123 = F12  
keyCode 124 = F13  
keyCode 125 = F14  
keyCode 126 = F15  
keyCode 127 = F16  
keyCode 128 = F17  
keyCode 129 = F18  
keyCode 130 = F19  
keyCode 131 = F20  
keyCode 132 = F21  
keyCode 133 = F22  
keyCode 134 = F23  
keyCode 135 = F24  
keyCode 136 = Num\_Lock (数字锁定键)