JS中键盘事件及keyCode对照表

最新推荐文章于 2025-03-26 22:33:10 发布

面条请不要欺负汉堡

最新推荐文章于 2025-03-26 22:33:10 发布

阅读量2.5w

点赞数 7

分类专栏： javascript+TypeScript 文章标签： JS中键盘事件及keyCode对照表

本文链接：https://blog.csdn.net/gao_xu_520/article/details/80538334

版权

javascript+TypeScript 专栏收录该内容

47 篇文章

订阅专栏

一.Keycode对照表

二.键盘事件

1.键盘事件：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

keydown：按键按下
keyup：按键抬起

keypress：按键按下抬起

2.使用时

//jq的方式
$("input").keydown(function(){
	$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
	$("input").css("background-color","#D6D6FF");
});

js的方式
document.οnkeyup=function(e){  
	console.log(e.keyCode)
	e=e||window.event;  
	e.preventDefault(); 
	console.log(index)
	switch(e.keyCode){  
		case 38: 
			console.log('上键');
			break; 
		case 40:
			console.log('下键');
			break;
	}
}

3.例子：上下键选择样式回车键输出选中的值

<style type="text/css">
	.list{
		width: 100px;
		height: 100px;
	}
	.list li{
		line-height: 20px;
		color: #333;
		list-style-type: none;
	}
	.addActive{
		background-color: #ccc;
		color: #fff;
	}
</style>
</head>
<body> 
    <ul class="list" id="jsList">          
        <li class="li_list">1.苹果</li>  
        <li class="li_list">2.梨</li>  
        <li class="li_list">3.香蕉</li>  
        <li class="li_list">4.凤梨</li>  
        <li class="li_list">5.西瓜</li>  
        <li class="li_list">6.香瓜</li>  
    </ul>
    <P>最后选择的值：<span id="valJs"></span></P>   
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var list=$('#jsList .li_list');
	// var index=0;
	document.οnkeyup=function(e){  
		console.log(e.keyCode)
		e=e||window.event;  
		e.preventDefault(); 
		var index=$('#jsList .li_list.addActive').index();//获取高亮的索引
		switch(e.keyCode){  
			case 38: 
			 	if(index >0 && index < list.length){
			 		index--;
			 		$('#jsList .li_list').removeClass('addActive').eq(index).addClass("addActive");
			 	}
				console.log('上键');
				break; 
			case 40:
				console.log('下键');
				if(index <list.length){
					index++;
			 		$('#jsList .li_list').removeClass('addActive').eq(index).addClass("addActive");
				}
				if(index >= list.length){
					$('#jsList .li_list').removeClass('addActive').eq(list.length-1).addClass("addActive");
				}
				break;
			case 13:
				console.log('回车键获取选中的值');
				$("#valJs").text($('#jsList .li_list.addActive').text());
				break;
		}
	}
})
</script>