js/jquery键盘事件及keycode大全

2023-09-18 20:44| 来源: 网络整理| 查看: 265

js/jquery的键盘事件分为keypress、keydown和keyup事件

一.键盘事件

1.keydown()事件当按钮被按下时，发生 keydown 事件。

2.keypress()事件keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。

3.keyup事件keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件

二.键盘对应的keycode大全字母和数字键的键码值(keyCode)按键键码按键键码按键键码按键键码A 65 J 74 S 83 1 49B 66 K 75 T 84 2 50C 67 L 76 U 85 3 51D 68 M 77 V 86 4 52E 69 N 78 W 87 5 53F 70 O 79 X 88 6 54G 71 P 80 Y 89 7 55H 72 Q 81 Z 90 8 56I 73 R 82 0 48 9 57

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)按键键码按键键码按键键码按键键码0 96 8 104 F1 112 F7 1181 97 9 105 F2 113 F8 1192 98 * 106 F3 114 F9 1203 99 + 107 F4 115 F10 1214 100 Enter 108 F5 116 F11 1225 101 - 109 F6 117 F12 1236 102 . 110 7 103 / 111

控制键键码值(keyCode)按键键码按键键码按键键码按键键码BackSpace 8 Esc 27 Right Arrow 39 -_ 189Tab 9 Spacebar 32 Down Arrow 40 .> 190Clear 12 Page Up 33 Insert 45 /? 191Enter 13 Page Down 34 Delete 46 `~ 192Shift 16 End 35 Num Lock 144 [{ 219Control 17 Home 36 ;: 186 /| 220Alt 18 Left Arrow 37 =+ 187 ]} 221Cape Lock 20 Up A

三.代码实例

1.获取按键对应的ascII码jquery代码：

1 $(document).keydown(function(event){ 2 console.log("Key: "+event.keyCode); 3 //或者 4 //console.log("Key: " + event.which); 5 });

event.keyCode,event.which可以帮助我们获取到按下的是哪个键,返回的是ascII码,比如说上下左右键,分别是38,40,37,39，可以使用console.log(event)查看其它属性

js代码：

1 window.onload = function () { 2 3 var keyCode; 4 var isCtrl = false; 5 document.onkeydown = function (e) { 6 if (!keyCode) { 7 if (window.event) { 8 keyCode = event.keyCode; 9 } else if (e.which) { 10 keyCode = e.which; 11 } 12 if (keyCode === 17) { 13 isCtrl = true; 14 } 15 console.log("key1：" + keyCode+",isCtrl："+isCtrl); 16 } 17 }; 18 19 document.onkeyup = function () { 20 if (keyCode) { 21 keyCode = undefined; 22 } 23 }; 24 }

2.左右方向键事件

1 $(document).keydown(function (event) { 2 //判断当event.keyCode 为37时（即左方面键），执行函数to_left(); 3 //判断当event.keyCode 为39时（即右方面键），执行函数to_right(); 4 if (event.keyCode === 37) { 5 console.log('按下了左方向键'); 6 //do somethings; 7 } else if (event.keyCode === 39) { 8 console.log('按下了右方向键'); 9 //do somethings; 10 } 11 }); 12 //或者 13 $(document).keydown(function(event){ 14 var e = event || window.event; 15 var k = e.keyCode || e.which; 16 switch(k) { 17 case 37: 18 //do somethings; 19 break; 20 case 39: 21 //do somethings; 22 break; 23 } 24 return false; 25 });

应用场景：小说网站中常见的按左右键来实现上一篇文章和下一篇文章；按ctrl+回车实现表单提交；google reader和有道阅读中的全快捷键操作...（以此提高用户体验）

实现ctrl+Enter提交表单，代码如下：

1 $(document).keypress(function(e) { 2 if (e.ctrlKey && e.which === 13){ 3 $("form").submit(); 4 } 5 });

3.组合按键

常见组合按键类型：单独的按键操作，如：delete、up、down等两位组合建，如：ctrl（cmd）+ 其他按键，alt+其他按键，shift+其他按键三位组合键，如：ctrl（cmd）+ shift + 其他按键，Ctrl（cmd）+ alt + 其他按键

上面这三种情况，都要处理的一个关键问题是阻止默认行为：比如删除按键，保存网页按键，保存书签等等，这些网页上的默认行为都需要阻止掉。另外一个就是监听按键，然后根据自己的需求，处理相应的事件。

步骤：第一阻止默认事件，在W3C标准和IE下，处理方式不太一致。分别是执行event.preventDefault()方法和将event.returnValue = false属性。当然如果你使用的jQuery等类库的话，只需要写一个event.preventDefault()就可以了，它帮你做到了兼容。第二监听按键类型，按键分两种情况，一种是单独按键（只有一个键），一种是组合键（两个以上按键）。单独按键需要监听事件的keyCode、charCode和which属性。

当然使用了jQuery也不用担心兼容问题了，直接使用event.keyCode即可。那怎么知道用户使用了组合键呢？

我们看到事件还有这么几个属性：ctrlKey（metaKey）、altKey、shiftKey，当你同时按下组合键的时候，这几个属性会变成true，所以组合键就可以通过监听按键code和这几个属性的状态进行判断了。

举一个简单的例子，js监听ctrl（cmd）+ s事件：

1 document.onkeydown = function(event) { 2 var keyCode = event.keyCode || event.which || event.charCode; 3 var ctrlKey = event.ctrlKey || eventaKey; 4 if(ctrlKey && keyCode === 83) { 5 event.preventDefault(); 6 alert('save'); 7 } 8 // event.preventDefault(); 9 // 注意：阻止默认事件不能放在外面，会阻止浏览器或者input/textarea的默认事件，应该放在相应的按键组合中去阻止 10 return false; 11 };

JS监听组合按键的原理基本上就是这个样子了。

当然GitHub上面也有封装好的插件shortcuts.js官网：http://openjs.com/scripts/events/keyboard_shortcuts/ ，还有一个jquery版本的：jquery.hotkeys，github地址：https://github.com/jeresig/jquery.hotkeys。

shortcuts.js支持单独按键和组合按键，同时可以通过配置是组合按键在输入框内失效。它的使用方式是：

1 shortcut("[",function() { 2 alert("Hi there!"); 3 }, { 4 'type':'keydown' //事件 5 , 'propagate':false //是否支持冒泡 6 , 'disable_in_input':true //是否在输入框内有效 7 , 'target':document //作用范围 8 });

【本文地址】

公司简介

联系我们