js获取键盘按键事件、判断键盘按键事件、调用键盘按键事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了js获取键盘按键事件、判断键盘按键事件、调用键盘按键事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一：获取键盘按键事件

<!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>

第三：调用键盘按键事件文章来源地址https://www.toymoban.com/news/detail-514158.html

<!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>

到了这里，关于js获取键盘按键事件、判断键盘按键事件、调用键盘按键事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！