jQuery按键事件处理方案

jQuery按键事件处理方案

一、按键事件有以下三种:

1、keydown()
keydown 事件会在键盘按下时触发。

2、keypress()
keypress 事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键。

3、keyup()
keyup 事件会在按键释放时触发,也就是你按下键盘起来后的事件。


二、获取按键键位对应的 ASCII 码:

// 键码获取
$(document).keydown(function(event) {
    alert(event.keyCode);
});

在这里,event.keyCode 记录我们按下了键盘上的ASCII码,比如说上下左右键分别是38、40、37、39,ESC 键是27,SHIFT 键是16。

大家不妨往前看一下附图,它就是部分按键键位代码分布图。


三、应用实例:

1、按键 ESC 隐藏弹出层(id 为 hideMe):

// 表单提交
$(document).keydown(function (event) {
    if (event.keyCode == 27) {
        alert("ESC");
        $("#hideMe").hide();
    };
});

2、按组合键 Ctrl + Enter 实现表单提交:

// 表单提交
$(document).keydown(function (event) {
    if (event.ctrlKey && event.keyCode == 13) {
        alert("Ctrl + Enter");
        $("#myForm").submit();
    };
});

实际应用过程中,要将代码中的 id 替换成您页面中的对应 id,同时把 alert 弹出提示代码去掉。


3