jQuery键盘事件处理-优快云博客

本文介绍如何使用jQuery处理键盘事件，包括keydown、keyup和keypress的区别及应用案例，如通过上下键进行选项选择等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery处理键盘事件,比如小说网站中常见的按左右键来实现上一篇文章和下一篇文章,按ctrl+回车实现表单提交,google reader和有道阅读中的全快捷键操作...

jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是:

keydown(); keyup(); keypress();

keydown()

keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件.

keyup()

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

keypress()

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

我们怎么才能获取我按下的是A还是Z还是回车按钮呢?

键盘事件可以传递一个参数event,其实说有的jQuery事件函数中都可以传递这么一个参数

$('input').keydown(function(event){

alert(event.keyCode);

});

上面代码中的,event.keyCode就可以帮助我们获取到我们按下了什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39

如果我们要实现ctrl+Enter就是ctrl+回车提交表单

$(document).keypress(function(e) {

if (e.ctrlKey && e.which == 13)

$("form").submit();

})

通过上下键选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
<script language = "javascript" type = "text/javascript">
        function ShowSelectItem(divId) {
            $("#hint div").css("background-color", "#ccc");
            $("#" + divId).css("background-color", "#f00");
            $("#search").val($("#" + divId).text());

            //$('#hint').css('display','none')
            $('#search').focus(function(){
                $('#hint').css('display','block')
                }).blur(function(){
                    $('#hint').css('display','none')
                    })
        }
        function SelectItemEvent() {
            var items = $("#hint div");
            var selected = 1; //默认选第一个
            ShowSelectItem(selected);

            //捕捉键盘事件上下左右分别为：38 40 37 39
            $(document).keydown( function (event) {
            if (event.keyCode == 38) { //按了上箭头
                    selected--;
                    if (selected < 1) selected = 5;
                    ShowSelectItem(selected);

                }
                else if (event.keyCode == 40) { //按了下箭头
                    selected++;
                    if(selected > 5) selected = 1;
                    ShowSelectItem(selected);
                }
            });
        }

        $(document).ready(function() {
            SelectItemEvent();
        });



    </script>

<body>

    <input type = "text" id = "search" onmousemove="showslect"/>
    <div id= "hint" style ="width : 200px; border : solid 1px Black;">
        <div id = "1">选项1</div>
        <div id = "2">选项2</div>
        <div id = "3">选项3</div>
        <div id = "4">选项4</div>
        <div id = "5">选项5</div>
    </div>

</body>
</html>