JS中键盘事件及keyCode对照表

小灰灰 2021-09-15 12:42 657阅读 0赞

一.Keycode对照表

![20180601153357278][]

![20180601153406667][]

二.键盘事件

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>

![20180601160124988][]

[20180601153357278]: /images/20210813/e3500386676f4916b3262dcd8e5446bb.png
[20180601153406667]: /images/20210813/5baa3fe5129543699f979165a5e615f7.png
[20180601160124988]: /images/20210813/65f525fc21b64a9a8167f46b5101b85d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，657人围观）

还没有评论，来说两句吧...

相关阅读

相关 Keycode对照表。

<table> <tbody> <tr> <td colspan="8" style="font-size:12px; color:rgb(69,6

叁歲伎倆/ 2024年02月18日 15:11/ 0 赞/ 43 阅读

相关键盘按键键码值（keyCode）对照表

> 键盘事件包含onkeypress onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘

梦里梦外;/ 2023年02月10日 03:57/ 0 赞/ 629 阅读

相关 HTML5 Canvas 绘图方法整理【十六、Canvas键盘事件、keyCode对照表】

在Canvas中键盘事件分为以下两种： 1、键盘按下 : keydown 2、键盘松开 : keyup; -------------------- 附上一份 k

忘是亡心i/ 2022年05月31日 10:23/ 0 赞/ 304 阅读

相关 js监听键盘事件的keycode大全

监听回车例子 <script type="text/javascript"> $(function(){ $(documen

￡神魔★判官ぃ/ 2022年01月10日 09:05/ 0 赞/ 482 阅读

相关 js键盘事件中的键码对照表

JS中的键盘事件经常用到，收集了键盘事件对应的键码来分享下： <table> <thead> <tr> <th>keyCode</th> <th

旧城等待，/ 2021年12月05日 15:17/ 0 赞/ 370 阅读

相关 KeyCode对照表

转载自[http://www.phpweblog.net/kiyone/archive/2007/04/19/1138.html][http_www.phpweblog.net

红太狼/ 2021年12月04日 01:27/ 0 赞/ 384 阅读

相关 JS中键盘事件及keyCode对照表

一.Keycode对照表 ![20180601153357278][] ![20180601153406667][] 二.键盘事件 1.键盘事件：完整的 k

小灰灰/ 2021年09月15日 12:42/ 0 赞/ 658 阅读

相关 JS--JavaScript使用键盘事件、键盘事件属性（keyCode、charCode、target...）、使用键盘控制页面元素

键盘事件当用户操作键盘时会触发键盘事件，键盘事件主要包括下面3种类型： keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Ope

墨蓝/ 2021年08月14日 00:02/ 0 赞/ 507 阅读

相关 js中获取键盘事件

<script type="text/javascript" language=JavaScript charset="UTF-8"> docume

ゝ一纸荒年。/ 2021年06月26日 16:06/ 0 赞/ 461 阅读

相关 jquery键盘事件及keycode大全

jquery的键盘事件分为`keypress`、`keydown`和`keyup`事件一、键盘事件 1、`keypress()`事件 `keypress` 当按钮被

冷不防/ 2021年06月26日 16:06/ 0 赞/ 484 阅读