JQuery判断Capslock状态

最新推荐文章于 2024-02-19 11:54:19 发布

原创最新推荐文章于 2024-02-19 11:54:19 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #Capslock #大写锁定

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的方法，用于检测用户的键盘大写锁定键是否被打开，并通过一个提示框来提醒用户。该方法结合了键盘事件监听与DOM操作。

html代码部分：（忽略了那几个样式吧，是我装逼用的...）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #tip {
            position: absolute;
            height: 15px;
            padding: 5px;
            text-align: right;
            display: none;
            background: #f9f5c7;
            border-radius: 3px;
            font-size: 8px;
            -moz-box-shadow: 0.3px 0.3px 1px 1px rgba(0, 0, 0, 0.4);
            -webkit-box-shadow: 0.3px 0.3px 1px 1px rgba(0, 0, 0, 0.4);
            box-shadow: 0.3px 0.3px 1px 1px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
    <input id="txt" type="text" /><span id="tip">大写锁定已打开！</span>
</body>
</html>

JQuery代码部分：

记得引入JQuery，或者引入网络上的：<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var txt = $("#txt");
            function show() {
                var ele = $("#tip");
                $(ele).css("left", txt.offset().left + 2);
                var top = txt.offset().top + txt.height() + 5;
                $(ele).css("top", top);
                $(ele).slideDown(200);
            }
            var isCapslockOn;
            function CapsLock_keyPress(e) {
                var e = event || window.event;
                var keyCode = e.keyCode || e.which;//按键的keyCode。
                var isShift = e.shiftKey || (keyCode == 16) || false;//shift键是否按住。
                if (
                ((keyCode >= 65 && keyCode <= 90) && !isShift) // CapsLock打开，且没有按住shift键。
                || ((keyCode >= 97 && keyCode <= 122) && isShift))// CapsLock打开，且按住shift键。
                    isCapslockOn = true;
                else
                    isCapslockOn = false;
            }
            function CapsLock_keydown(e) {
                var keyCode = window.event ? e.keyCode : e.which;
                if (keyCode == 20 && isCapslockOn == true)
                    isCapslockOn = false;
                else if (keyCode == 20 && isCapslockOn == false)
                    isCapslockOn = true;
            }
            function tip() {
                var ele = $("#tip");
                if (isCapslockOn && ele.is(":hidden"))
                    show();
                else if (!isCapslockOn && !ele.is(":hidden"))
                    ele.hide();
            }
            //keyPress可以判断当前CapsLock状态，但不能捕获CapsLock键。
            $(document).keypress(CapsLock_keyPress);
            //keyDown可以捕获CapsLock键，但不能判断CapsLock的状态。
            $(document).keydown(CapsLock_keydown);


            txt.keyup(tip).focus(function () {
                if (isCapslockOn)
                    show("tip");
            }).blur(function () {
                $("#tip").hide();
            });
        })
</script>