JS键盘事件—onkeydown,onkeyup

键盘事件

onkeydown 按键被按下

对于某个按键一直按着不放,则事件会一直触发
当onkeydown连续触发式,第一次和第二次之间会有一个间隔时间,其他之后会非常的快
这种设计是为了防止我们误操作

onkeyup 按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象,或者是document

可以通过keyCode来获取按键的编码
通过它可以判断那个按键被按下

除了keyCode ,事件对象还提供了几个属性
altKey, ctrlKey ,shiftKey
这三个用来判断alt ctrl shift 是否被按下
如果按下则返回true , 否则返回false


<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


<html>
<head>
<meta charset="utf-8">
<title>键盘移动divtitle>
	<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>

JS键盘事件—onkeydown,onkeyup_第1张图片

你可能感兴趣的:(JavaScript)