JS键盘事件—onkeydown，onkeyup

最新推荐文章于 2022-11-22 22:15:17 发布

一介白衣入江南

最新推荐文章于 2022-11-22 22:15:17 发布

阅读量6.4k

点赞数 5

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43409765/article/details/91332277

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

键盘事件

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>
		window.onload=function(){
			document.onkeydown=function(event){
				event=event||window.event;
				//console.log(event.keyCode);
				//判断一个y是否被按下
//				if(event.keyCode === 89){
//					console.log("y键被按下了");
//				}
				
				//判断一个y和ctrl是否被同时按下
				if(event.keyCode === 89 && event.ctrlKey){
					console.log("y键和ctrl都被按下了");
				}
			}
				
			//获取input
			var input=document.getElementsByTagName("input")[0];
			input.onkeydown=function(event){
				event=event||window.event;
				//使文本框中不能输入数字  0——9的编码是48——57 小键盘的是96——105
				if((event.keyCode >=48 && event.keyCode <= 57)||(event.keyCode >=96 && event.keyCode <= 105)){
				   //在文本框中输入内容，属于onkeydown的默认行为
				   //取消在onkeydown中取消默认行为，则输入的内容不会出现在文本框中
				   return false ;
				   }
			}
		}
	</script>
</head>
<body>
	<input type="text">
</body>
</html>

键盘移动div

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>键盘移动div</title>
	<style>
		#box1{
			width: 100px;
			height:100px;
			background-color: red;
			/*
			开启box1的绝对定位
			*/
			position: absolute;
		}
	</style>
	<script>
		/*
		使div可以根据不同的方向键向不同的方向移动
		*/
		window.onload=function(){
			//为我们的document绑定一个按键被按下的事件
			document.onkeydown=function(event){
				event=event||window.event;
				//console.log(event.keyCode);
				//方向键是37——40    左上右下
				
				//定义一个变量，来表示移动的速度
				var speed=10;
				//当用户按了ctrl以后，速度加快
				if(event.ctrlKey){
					speed=50;
				}
				switch(event.keyCode){
					case 37:
						box1.style.left=box1.offsetLeft-speed+"px";
						break;
					case 38:
						box1.style.top=box1.offsetTop-speed+"px";
						break;	
					case 39:
						box1.style.left=box1.offsetLeft+speed+"px";
						break;	
					case 40:
						box1.style.top=box1.offsetTop+speed+"px";
						break;
					}
			}
		}
	
	</script>
</head>

<body>
	<div id="box1"></div>
</body>
</html>

在这里插入图片描述

一介白衣入江南

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
JS键盘事件—onkeydown，onkeyup

键盘事件onkeydown 按键被按下对于某个按键一直按着不放，则事件会一直触发当onkeydown连续触发式，第一次和第二次之间会有一个间隔时间，其他之后会非常的快这种设计是为了防止我们误操作onkeyup 按键被松开键盘事件一般都会绑定给一些可以获取到焦点的对象,或者是document可以通过keyCode来获取按键的编码通过它可以判断那个按键被按下除了keyCo...
复制链接

扫一扫

专栏目录