键盘事件onkeydown和onkeyup

最新推荐文章于 2024-04-18 16:56:37 发布

原创最新推荐文章于 2024-04-18 16:56:37 发布 · 927 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#点击事件 #js #前端

本文详细介绍了JavaScript中的键盘事件处理，包括onkeydown和onkeyup事件。onkeydown事件会在按键被按下时触发，可能因长时间按住而连续触发，用于防止误操作。而onkeyup事件只在按键释放时触发一次。文章还展示了如何通过keyCode属性判断按键，以及利用altKey、ctrlKey和shiftKey判断组合键的状态。此外，示例代码演示了如何在文本框中阻止数字输入。

onkeydown
按键被按下，对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发，当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常长，这种设计是为了防治误操作的发生。

onkeyup
按键被松开，不会连续触发

键盘事件一般都会绑定给可以获取到焦点的对象或者文单对象document。

可以通过keyCode来获取按键的编码
         通过他可以判断那个按键被按下，除了keyCode，事件对象还提供了几个属性
                        altKey
                        ctrlKey
                        shiftKey
                这三个用来判断alt,ctrl,shift是否被按下，如果按下则返回true，否则返回false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
//				document.onkeydown = function(event){
//					event = event || window.event;
//					
//					//console.log(event.keyCode);
//					
//					//判断一个y是否被按下
//					//判断Y和Ctrl是否同时被按下
//					if(event.keyCode == 89 && event.ctrlKey){
//						console.log("y被按下");
//					}
//					
//					//console.log("hello");
//				}
//				
//				document.onkeyup = function(){
//					//console.log("hello 2 ");
//				}
//				

				var input = document.getElementsByTagName("input")[0];
				input.onkeydown = function(event){
					
					event = event ||window.event;
					
					//console.log(event.keyCode);
					//数字的keyCode是48-57
					
					//是文本框中不能输入数字
					if(event.keyCode >=48 && event.keyCode <=57 ){
						
					}
					
					//在文本框中输入内容，属于keydown的默认行为
					//如果在keydown中取消了默认行为，则输入的内容，不会出现在文本框中
					return false;
				}
				
				
				
			};
			
		</script>
		
	</head>
	<body>
		<div id="box1" style="width: 200px;height: 100px;background-color: plum;">
			<input type="text" name="" id="" value="" />
		</div>
	</body>
</html>