JS键盘监听事件

忘是亡心i 2023-01-21 10:20 30阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			window.onload = function(){ 
    				
    				/* * 键盘事件： * onkeydown * - 按键被按下 * - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发 * - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快 * 这种设计是为了防止误操作的发生。 * onkeyup * - 按键被松开 * * 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document */
    				
    				document.onkeydown = function(event){ 
    					event = event || window.event;
    					
    					/* * 可以通过keyCode来获取按键的编码 * 通过它可以判断哪个按键被按下 * 除了keyCode，事件对象中还提供了几个属性 * altKey * ctrlKey * shiftKey * - 这个三个用来判断alt ctrl 和 shift是否被按下 * 如果按下则返回true，否则返回false */
    					
    					//console.log(event.keyCode);
    					
    					//判断一个y是否被按下
    					//判断y和ctrl是否同时被按下
    					if(event.keyCode === 89 && event.ctrlKey){ 
    						console.log("ctrl和y都被按下了");
    					}
    					
    					
    				};
    				
    				/*document.onkeyup = function(){ console.log("按键松开了"); };*/
    				
    				//获取input
    				var input = document.getElementsByTagName("input")[0];
    				
    				input.onkeydown = function(event){ 
    					
    					event = event || window.event;
    					
    					//console.log(event.keyCode);
    					//数字 48 - 57
    					//使文本框中不能输入数字
    					if(event.keyCode >= 48 && event.keyCode <= 57){ 
    						//在文本框中输入内容，属于onkeydown的默认行为
    						//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
    						return false;
    					}
    					
    					
    				};
    			};
    			
    			
    		</script>
    	</head>
    	<body>
    		
    		<input type="text" />
    		
    	</body>
    </html>