引言
最近用到了前端部分键盘事件的监听,我将前端界面中JQuery与JS监听键盘事件的代码整理发出。
JS代码
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==27){ // 按 Esc 要做的事情
alert('27');
}
if(e && e.keyCode==113){ // 按 F2 要做的事情
alert('113');
}
if(e && e.keyCode==13){ // enter 键要做的事情
alert('13');
}
};
document.onkeydown=keyDownSearch;
function keyDownSearch(e) {
// 兼容FF和IE和Opera
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
alert('13');
}
};
JQuery代码
键盘事件:
1、keydown()
keydown()事件会在键盘按下时触发
2、keyup()
keyup()事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
$(document).keypress(function(e) {
// 回车键事件
if(e.which == 13) {
alert('13');
}
});
$(document).keydown(function(event){
//判断当event.keyCode 为37时(即左方面键),执行函数to_left();
//判断当event.keyCode 为39时(即右方面键),执行函数to_right();
if(event.keyCode == 37){
alert('37');
}else if (event.keyCode == 39){
alert('39');
}
});
$(document).keydown(function(event){
//这里写自定义的事件
});
$('#id').keydown(function(e){
if(e.keyCode==13){
//处理事件
}
});
$(function () {
$('input:text:first').focus(); //把焦点放在第一个文本框
var $inp = $('input'); //所有的input元素
$inp.keypress(function (e) { //这里给function一个事件参数命名为e,叫event也行,随意的,e就是IE窗口发生的事件。
var key = e.which; //e.which是按键的值
if (key == 13) {
alert("aaa");
}
});
});
其他
取消回车键
模拟Tab键
这段代码会自动跳到其他元素上。
键盘事件对应的代码
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
---|---|---|---|---|---|---|---|
字母和数字键的键码值(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 | 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 | ||||
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
控制键键码值(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 |
文章评论