js获取键盘按键事件、判断键盘按键事件、调用键盘按键事件

最新推荐文章于 2024-05-10 08:00:37 发布

前端-文龙刚

最新推荐文章于 2024-05-10 08:00:37 发布

阅读量2.9k

点赞数

分类专栏： Javascript 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_17211063/article/details/128326235

版权

Javascript 专栏收录该内容

84 篇文章 1 订阅

订阅专栏

第一：获取键盘按键事件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>获取键盘事件</title>
</head>
<body>
	<input type="text" name="" id="" value="" />
</body>
</html>
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		//keyup 是键盘按下并弹起时触发
		$('input').keyup(function(event){
			console.log(event.keyCode);
			if(event.keyCode=='13'){
				console.log('您按下了确认键');
			}
		});
		
		//keypress 输入字符时
		$('input').keypress(function(event){
			console.log(event.keyCode);
			console.log('您正在输入')
		});
		
		//keyup 释放按键时
		$('input').keyup(function(event){
			console.log(event.keyCode);
			console.log('您已停止输入')
		});
	});
</script>

第二：判断键盘按键事件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>判断鼠标事件</title>
	<style type="text/css">
		*{margin:0;padding:0;list-style-type:none;}
		div{margin:60px auto;width:600px;height:600px;border:1px solid red;}
	</style>
</head>
<body>
	<div>
		
	</div>
</body>
</html>
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	$(function(){//在body区域内按下鼠标左右分别得出各自的值
		$("body").mousedown(function(e){
			$('div').html(e.which)
		})
	});
</script>
<script type="text/javascript">
	$(document).ready(function() {//在div区域内按下鼠标，根据值得出按下的哪个键       
		$("div").mousedown(function(event) {          
			if(event.button == 0) {              
				console.log("您点击了鼠标左键!");          
			} else if(event.button == 2) {              
				console.log("您点击了鼠标右键!");         
			}      
		});     
	});
</script>
<script type="text/javascript">
	//鼠标滑轮事件
	windowAddMouseWheel();
	function windowAddMouseWheel() {
		var scrollFunc = function(e) {
			e = e || window.event;
			if(e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
				if(e.wheelDelta > 0) { //当滑轮向上滚动时
					console.log("滑轮向上滚动");
				}
				if(e.wheelDelta < 0) { //当滑轮向下滚动时
					console.log("滑轮向下滚动");
				}
			} else if(e.detail) { //Firefox滑轮事件
				if(e.detail > 0) { //当滑轮向上滚动时
					console.log("滑轮向上滚动");
				}
				if(e.detail < 0) { //当滑轮向下滚动时
					console.log("滑轮向下滚动");
				}
			}
		};
		//给页面绑定滑轮滚动事件
		if(document.addEventListener) {
			document.addEventListener('DOMMouseScroll', scrollFunc, false);
		}
		//滚动滑轮触发scrollFunc方法
		window.onmousewheel = document.onmousewheel = scrollFunc;
	}
</script>

第三：调用键盘按键事件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>调用键盘按键</title>
	<style type="text/css">
		*{margin:0;padding:0;list-style-type:none;}
		.con{top:0;left:0;width:100%;height:100%;background-color:blue;line-height:500px;text-align:center;display:none;position:fixed;}
	</style>
</head>
<body>
	<a class="click-btn" href="javascript:;">点击</a>
	<div class="con">我是内容</div>
</body>
</html>
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	$('a.click-btn').click(function(){
		$('.con').fadeIn();
	});
	
	$(document).keyup(function(event){
	 	switch(event.keyCode){
			case 27:	//这是Esc键
			$('.con').fadeOut();
			case 96:	//这是数字0键
			$('.con').fadeOut();
	 	}
	});
</script>