jquery键盘事件实现enter、上下左右切换input焦点

最新推荐文章于 2021-04-29 21:27:00 发布

原创最新推荐文章于 2021-04-29 21:27:00 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何利用jQuery监听键盘事件，特别是enter键及方向键（上、下、左、右），实现焦点在不同input元素间的切换，提升用户体验。

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

jquery键盘事件实现enter、上下左右切换input焦点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单事件 and 键盘事件and 回车和小键盘切换input焦点</title>
    <style type="text/css">
        .color
        {
            background-color: rgb(77,198,227);
            border-color: white;
        }
        input
        {
            line-height: 25px;
            border-color: red;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //回车和小键盘切换input焦点
        function getfocus(thisinput)
        {
            var inputs = document.getElementsByTagName("input");
            if(event.keyCode == 13 || event.keyCode == 40 || event.keyCode == 39) {
                for (var i=0; i < inputs.length; i++) {
                    if (thisinput == inputs[i])
                    {
                        if (i == (inputs.length - 1 ))
                        {
                            inputs[0].focus();
                            break;
                        }
                        else
                        {
                            inputs[i + 1].focus();
                            break;
                        }
                    }
                }
            }
            else if(event.keyCode == 38 || event.keyCode == 37) {
                for (var i=0; i < inputs.length; i++) {
                    if (thisinput == inputs[i])
                    {
                        if(i != 0)
                        {
                            inputs[i - 1].focus();
                            break;
                        }
                        else
                        {
                            inputs[inputs.length - 1].focus();
                            break;
                        }
                    }
                }
            }
        }
        $(function()
        {
            $("input").change(function()
            {
                $(this).css("border","double");
            });
            $("input").bind({focus:function()
            {
                $(this).addClass("color");
            },
            blur:function()
            {
                $(this).removeClass("color");
            }});
            $("input").keydown(function(event)
            {
                var thisinput = $(this)[0];
                    getfocus(thisinput);
            });
        });
    </script>
</head>
<body>
    <input type="text" name="txt"><br/><br/>
    <input type="text" name="txtName"><br/><br/>
    <input type="text" name="Name"><br/><br/>
</body>
</html>