javascript键盘事件用法总结

来源:网络整理作者: 发布时间:2020-12-22 04:13

本文介绍了javascript键盘事件的相关知识，有关javascript键盘事件的用法总结，感兴趣的朋友参考下。...

document.getElementById("upCharCode").innerHTML = 0
}
<body>
}
5. type="image"的input，效果等同于type="submit"。不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
</tr>
document.getElementById("pressKeyCode").innerHTML = evt.keyCode
text-align:center;

}
if(keycode == 13 || keycode == 108){ //如果按下ENTER键
</p>
例1：
<p><input type="text" value="将焦点聚焦于文本域中，然后按回车键或Esc键" /></p>
return false
<script type="text/javascript">
最后附上，键盘中所有按钮的keycode一览
document.getElementById("upKeyCode").innerHTML = 0
<td id="pressKeyCode">0</td>
document.onkeyup = showKeyUp

复制代码代码示例:

document.getElementById("upKeyCode").innerHTML = evt.keyCode
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
}
控制键键码值(keyCode) 按键键码按键键码按键键码按键键码 BackSpace 8 Esc 27 Right Arrow 39 -_ 189 Tab 9 Spacebar 32 Down 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
<input type="reset" onclick="alert('reset button is clicked');" value="reset" />

</tr>
<h3>键盘事件</h3>
onkeypress事件不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应，onkeydown和onkeyup均可以对系统功能键进行有效的拦截，但事件截获的位置不同，可以根据具体的情况选择不同的键盘事件。

<th>onKeyUp</th>
return false
<tr>
字母和数字键的键码值(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

<html dir="ltr" lang="zh-CN">
} else {
}
</script>
<td id="downCharCode">0</td>
function showKeyPress(evt) {
4. 其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
document.onkeydown = showKeyDown
<tr>
// 把keyup事件绑定到document中
if (document.addEventListener) {
<td><span id="shiftdown">Shift</span></td>
evt = (evt) ? evt : window.event
<td><span id="ctrlUp">Ctrl</span></td>
if (evt.charCode) {
<td><span id="ctrl">Ctrl</span></td>
}
window.onload=function(){
3. 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
if (evt.charCode) {
<td id="upKeyCode">0</td>
}
</body>
另外，还可以用event.altKey，event.ctrlKey，event.metaKey(上有微软的旗帜)，event.shiftKey来判断对应的键是否被按下，因为它们都是返回一个布尔值。

e = e || window.event;
<form>
<table border=1 cellpadding="2" cellspacing="0">
evt = (evt) ? evt : window.event
</tr>
showModifiers("Down", evt)
}
}

<!doctype html>
1. 如果表单里有一个type="submit"的按钮，回车键生效。
<head>
<th>onKeyDown</th>
<html dir="ltr" lang="zh-CN">
evt = (evt) ? evt : window.event
function showKeyDown(evt) {
不过并不止提交按钮会激发form的submit事件，连同上面的归纳如下：
</tr>
function restoreModifiers(ext) {
}
<tr>
}
}

复制代码代码如下:

document.getElementById("downKeyCode").innerHTML = evt.keyCode
<td><span id="altdown">Alt</span></td>
<td id="downKeyCode">0</td>

function showModifiers(ext, evt) {
<td><span id="shiftUp">Shift</span></td>

<th>onKeyPress</th>
在form中， submit的快捷键是 enter，reset的快捷键是 esc。不过在IE6,safari4,ff3.5,opera10,chrome中，按Enter，不但激发form的submit事件，同时也会激发提交按钮的onclick，激发顺序为提交按钮的 onclick →　form 的 onsubmit。
document.getElementById("alt" + ext).style.backgroundColor = "#0000ff"
<td id="pressCharCode">0</td>
<th>Key Codes</th>
document.getElementById("downCharCode").innerHTML = evt.charCode
<td><span id="altUp">Alt</span></td>
<td><span id="alt">Alt</span></td>
} else if (document.attachEvent) {
document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00"
if (evt.charCode) {
<td id="upCharCode">0</td>
document.onkeyup = getKey;
2. 如果表单里只有一个type="text"的input，不管按钮是什么type，回车键生效。

var keycode = e.which ? e.which : e.keyCode;
restoreModifiers("")
<p><input type="submit" onclick="alert('submit button is clicked');" value="submit"/>
if (evt.altKey) {
</head>
document.getElementById("shift" + ext).style.backgroundColor = "#ff0000"
<td><span id="ctrlDown">Ctrl</span></td>

复制代码代码示例:

document.getElementById("pressKeyCode").innerHTML = 0
}
td {
<meta charset="gb2312"/>
//在这里设置你想绑定的事件
function getKey(e){
数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode) 按键键码按键键码按键键码按键键码 0 96 8 104 F1 112 F7 118 1 97 9 105 F2 113 F8 119 2 98 * 106 F3 114 F9 120 3 99 + 107 F4 115 F10 121 4 100 Enter 108 F5 116 F11 122 5 101 - 109 F6 117 F12 123 6 102 . 110 7 103 / 111
document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff"
</html>
<td><span id="shift">Shift</span></td>

<th></th>
</body>
document.attachEvent("onkeyup",getKey);
document.addEventListener("keyup",getKey,false);
document.onkeypress = showKeyPress
</form>
<form onsubmit="alert('Form is submiting');return false;">
if (evt.ctrlKey) {
restoreModifiers("Up")

</tr>