JS中鍵盤事件及keyCode對照表
阿新 • • 發佈：2019-01-29
一.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.onkeyup=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.onkeyup=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>
