HelloStranger

每个人都是初学者

JS、JQuery监听键盘敲击事件代码汇总

引言

最近用到了前端部分键盘事件的监听,我将前端界面中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’);
}
});

 

由于浏览器键盘按下事件的不同,可能导致部分事件不能正常操作,所以推荐keydown事件进行操作!

 

全局键盘敲击事件

$(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”);
}
});
});
input标签有效、button按钮需要按一下在点击回车键

其他

取消回车键
if (window.event.keyCode==13) {window.event.keyCode=0;}  
模拟Tab键
if (window.event.keyCode==13){ window.event.keyCode=9;}

这段代码会自动跳到其他元素上。

键盘事件对应的代码

按键 键码 按键 键码 按键 键码 按键 键码
字母和数字键的键码值(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
点赞

发表评论