javascript基础（键盘事件）（三十八）

最新推荐文章于 2022-10-11 20:39:48 发布

咸鸭蛋炒饭

最新推荐文章于 2022-10-11 20:39:48 发布

阅读量830

点赞数

分类专栏： HTML5基础篇文章标签： dom html javascript 经验

本文链接：https://blog.csdn.net/u010853130/article/details/55101418

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1键盘事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 键盘事件一般都要绑定给可以获取焦点的元素（一般指表单项），或者是document
				 * 
				 * onkeydown
				 * 	- 按键按下事件
				 * onkeyup
				 * 	- 按键松开事件
				 * 
				 */
				
				//为document绑定一个按键按下事件
				/*
				 * 当按下键盘上的一个按键一直不松开时，会连续的触发onkeydown事件，
				 * 	但是第一次触发和第二次触发的间隔会比较长，而第二次以后会一直连续触发
				 * 	这种设计是为了防止误操作
				 */
				document.onkeydown = function(event){
					event = event || window.event;
					
					//获取按的是哪个按键
					/*
					 * event中有一个keyCode，可以用来获取当前按键的编码
					 * 	可以通过keyCode来识别用户按下的按键
					 * 
					 * 除了keyCode，还提供了三个属性
					 * 	altKey
					 * 	ctrlKey
					 * 	shiftKey
					 * 		- 专门用来判断alt ctrl shift是否被按下
					 * 			如果按下返回true，没有返回false
					 */
					//console.log(event.keyCode);
					
					//console.log(event.ctrlKey);
					
					//判断e和ctrl是否被同时按下
					/*if(event.keyCode == 69 && event.ctrlKey){
						console.log("e和ctrl被按下了~~~");
					}*/
					
				};
				
				/*document.onkeyup = function(){
					console.log("按键松开了");
				};*/
				
				
				var inp = document.getElementById("inp");
				
				inp.onkeydown = function(event){
					
					event = event || window.event;
					
					//console.log(event.keyCode);
					
					//console.log("按下了");
					
					//在文本框中输出文字，是onkeydown的默认行为
					//如果在最后取消了默认行为，则不会在文本框中显示内容
					//return false;
					
					/*
					 * 使用户不能在文本框中输入数字
					 */
					
					//判断用户输入的是否是数字
					if(event.keyCode >= 48 && event.keyCode <= 57){
						//如果是数字，则取消默认行为
						return false;
					}
					
					
					
				};
				
			};
			
		</script>
	</head>
	<body>
		
		<input id="inp" type="text" />
	</body>
</html>

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使div可以根据不同的按键向不同的方向移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				
				//绑定一个按键按下的事件
				document.onkeydown = function(event){
					
					event = event || window.event;
					
					//创建一个变量来表示速度
					var speed = 10;
					
					//如果用户按了ctrl键，则加速
					if(event.ctrlKey){
						speed = 100;
					}
					
					//判断哪个按键被按下
					/*
					 * 左 37    右 39
					 * 上38     下 40
					 * 
					 */
					switch(event.keyCode){
						case 37 :
							//使div向左移动 , 减少left属性值
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39 :
							//使div向右移动 , 增加left属性值
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38 :
							//使div向上移动 , 减少top属性值
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40 :
							//使div向上移动 , 增加top属性值
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
				};
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

咸鸭蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript基础（键盘事件）（三十八）

1键盘事件： window.onload = function(){ /* * 键盘事件一般都要绑定给可以获取焦点的元素（一般指表单项），或者是document * * onkeydown * - 按键按下事件 * onkeyup * - 按键松开事件 *
复制链接

扫一扫