我要评论键盘事件与鼠标事件类似，同样常出现在javascript开发过程中。键盘事件的触发过程具体是这样的: 在用户按下键盘上的一个字符键时， 首先会触发keydown事件，然后是keypress事件，最后是keyup事件。其中，keydown和keypress事件是在文本框发生变化之前 被触发；而keyup在文本框发生变化之后被触发。如果用户按下一个键不放，就会重复触发keydown和keypress事件。在用户按下一个非字符键时，首先触发keydown事件，然后就是keyup事件。如果用户按下一个键不放，就会重复触发keydown。
一、键盘事件属性
键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlkey 和 shiftkey 属性除外，因为它们可以在水保事件中存在。例如，当按下 ctrl 或shift 键时单击鼠标操作。
键盘事件定义的属性
| 属性 | 说明 |
|---|---|
| keycode | 该属性包含键盘中对应键位的键值 |
| charcode | 该属性包含键盘中对应键位的 unicode 编码，仅 dom 支持 |
| target | 发生事件的节点（包含元素），仅 dom 支持 |
| srcelement | 发生事件的元素，仅 ie 支持 |
| shiftkey | 是否按下 shift 键，如果按下返回 true，否则为false |
| ctrlkey | 是否按下 ctrl 键，如果按下返回 true，否则为false |
| altkey | 是否按下 alt 键，如果按下返回 true，否则为false |
| metakey | 是否按下 mtea 键，如果按下返回 true，否则为false，仅 dom 支持 |
示例1
ctrlkey 和 shiftkey 属性可存在于键盘和鼠标事件中，表示键盘上的 ctrl 和 shift 键是否被按住。下面示例能够监测 ctrl 和 shift 键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，则会把该元素从页面中删除。
document.onclick = function (e) {
var e = e || window.event; //标准化事件对象
var t = e.target || e.srcelement; //获取发生事件的元素，兼容ie和dom
if (e.ctrlkey && e.shiftkey) { //如果同时按下ctrl和shift键
t.parentnode.removechild(t); //移出当前元素
}
}keycode 和 charcode 属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的，如下表所示。读者可以根据需要有针对性的选用事件响应类型和引用属性值。
keycode 和 charcode 属性值
| 属性 | ie 事件模型 | dom 事件模型 |
|---|---|---|
| keycode（keypress） | 返回所有字符键的正确值，区分大写状态（65~90）和小写状态（97~122） | 功能键返回正确值，而 shift、ctrl、alt、printscreen、scrolllock 无返回值，其他所有键值都返回 0 |
| keycode（keydown） | 返回所有键值（除 printscreen 键），字母键都以大写状态显示键值（65~90） | 返回所有键值（除 printscreen 键），字母键都以大写状态显示键值（65~90） |
| keycode（keyup） | 返回所有键值（除 printscreen 键），字母键都以大写状态显示键值（65~90） | 返回所有键值（除 printscreen 键），字母键都以大写状态显示键值（65~90） |
| charcode（keypress） | 不支持该属性 | 返回字符键，区分大写状态（65~90）和小写状态（97~122），shift、ctrl、alt、printscreen、scrolllock 无返回值，其他所有键值都返回 0 |
| charcode（keydown） | 不支持该属性 | 所有键值为 0 |
| charcode（keyup） | 不支持该属性 | 所有键值为 0 |
某些键的可用性不是很正确，如 pageup 和 home 键等。不过常用功能键和字符键都是比较稳定的。
示例2
下面示例演示了如何使用方向键控制页面元素的移动效果。
<div id="box"></div>
<script>
var box = document.getelementbyid("box"); // 获取页面元素的引用指针
box.style.position = "absolute"; // 色块绝对定位
box.style.width = "20px"; // 色块宽度
box.style.height = "20px"; // 色块高度
box.style.backgroundcolor = "red"; // 色块背景
document.onkeydown = keydown;
//在document对象中注册keydown事件处理函数
function keydown(event){ // 方向键控制元素移动函数
var event = event || window.event; // 标准化事件对象
switch(event.keycode){ // 获取当前按下键盘键的编码
case 37 : // 按下左箭头键，向左移动5个像素
box.style.left = box.offsetleft - 5 + "px";
break;
case 39 : // 按下右箭头键，向右移动5个像素
box.style.left = box.offsetleft + 5 + "px";
break;
case 38 : // 按下上箭头键，向上移动5个像素
box.style.top = box.offsettop - 5 + "px";
break;
case 40 : // 按下下箭头键，向下移动5个像素
box.style.top = box.offsettop + 5 + "px";
break;
}
return false
}
</script>
在上面示例中，首先获取页面元素，通过 css 脚本控制元素绝对定位、大小和背景色。然后在 document 对象上注册鼠标按下事件类型处理函数，在事件回调函数 keydown() 中侦测当前按下的方向键，并决定定位元素在窗口中的位置。其中元素的 offsetleft 和 offsettop 属性可以存取它在页面中的位置。
键盘响应顺序
键盘事件主要包括下面 3 种类型：
- keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 ie 和 safari 浏览器下还会禁止keypress 事件响应）。
- keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
- keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。
当获取用户正按下键码时，可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。
当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。
对于字符键来说，键盘事件的响应顺序：keydown → keypress → keyup。对于非字符键（如功能键或特殊键）来说，键盘事件的相应顺序：keydown → keyup。
如果按下字符键不放，则 keydown 和 keypress 事件将逐个持续发生，直至松开按键。如果按下非字符键不放，则只有 keydown 事件持续发生，直至松开按键。
示例
下面设计一个简单示例，以获取键盘事件相应顺序。
<textarea id="text" cols="26" rows="16"></textarea>
<script>
var n = 1; // 定义编号变量
var text = document.getelementbyid("text"); // 获取文本区域的引用指针
text.onkeydown = f; // 注册keydown事件处理函数
text.onkeyup = f; // 注册keyup事件处理函数
text.onkeypress = f; // 注册keypress事件处理函数
function f(e){ // 事件调用函数
var e = e || window.event; // 标准化事件对象
text.value += (n++) + "=" + e.type +" (keycode=" + e.keycode + ")\n";
//捕获事件响应信息
}
</script>
键盘键码keycode对照表
| 字母和数字键的键码值（keycode） | |||||||
|---|---|---|---|---|---|---|---|
| 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
| a | 65 | j | 74 | s | 83 | 1 | 49 |
| b | 66 | k | 75 | t | 84 | 2 | 50 |
| c | 67 | l | 76 | u | 85 | 3 | 51 |
| d | 68 | m | 77 | v | 86 | 4 | 52 |
| e | 69 | n | 78 | w | 87 | 5 | 53 |
| f | 70 | o | 79 | x | 88 | 6 | 54 |
| g | 71 | p | 80 | y | 89 | 7 | 55 |
| h | 72 | q | 81 | z | 90 | 8 | 56 |
| i | 73 | r | 82 | 0 | 48 | 9 | 57 |
| 数字键盘上的各键键码值（keycode） | 功能键键码值（keycode） | ||||||
|---|---|---|---|---|---|---|---|
| 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
| 0 | 96 | 8 | 104 | f1 | 112 | f9 | 120 |
| 1 | 97 | 9 | 105 | f2 | 113 | f10 | 121 |
| 2 | 98 | * | 106 | f3 | 114 | f11 | 122 |
| 3 | 99 | + | 107 | f4 | 115 | f12 | 123 |
| 4 | 100 | enter | 108 | f5 | 116 | ||
| 5 | 101 | - | 109 | f6 | 117 | ||
| 6 | 102 | . | 110 | f7 | 118 | ||
| 7 | 103 | / | 111 | f8 | 119 | ||
| 控制键键码值（keycode） | |||||||
|---|---|---|---|---|---|---|---|
| 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
| backspace | 8 | esc | 27 | right arrow | 39 | -_ | 189 |
| tab | 9 | spacebar | 32 | dw arrow | 40 | .> | 190 |
| clear | 12 | page up | 33 | insert | 45 | /? | 191 |
| enter | 13 | page down | 34 | delete | 46 | `~ | 192 |
| shift | 16 | end | 35 | num lock | 144 | [{ | 219 |
| control | 17 | home | 36 | ;: | 186 | \| | 220 |
| alt | 18 | left arrow | 37 | =+ | 187 | ]} | 221 |
| cape lock | 20 | up arrow | 38 | ,< | 188 | '" | 222 |
| 多媒体键码值（keycode） | |||
|---|---|---|---|
| 按键 | 键码 | 按键 | 键码 |
| 音量加 | 175 | 浏览器 | 172 |
| 音量减 | 174 | 邮件 | 180 |
| 停止 | 179 | 搜索 | 170 |
| 静音 | 173 | 收藏 | 171 |
到此这篇关于js常用的键盘事件有哪些_用法示例_键码keycode对照表的文章就介绍到这了,更多相关js键盘事件keycode内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论