js实现密码输入框对开启键盘大写锁定的提示(IE浏览器下有自动识别提示则不执行(用IE自带效果即可))

Posted 玻璃杯

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现密码输入框对开启键盘大写锁定的提示(IE浏览器下有自动识别提示则不执行(用IE自带效果即可))相关的知识，希望对你有一定的参考价值。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>大写键盘锁定提示</title>
</head>
<body>
请输入密码：<input class="text" id="loginPasswd" type="password"/>
<div id="capital" style="display:none;color:#F90;padding:2px 0 2px 95px;position:absolute;">大写锁定已开启</div>
<script type="text/javascript">
    var inputPWD = document.getElementById(‘loginPasswd‘);
    inputPWD.onfocus = function () {
        isCapsLock();
    }
    /* 检测输入框的大小写是否开启 */
    function isCapsLock() {
        var inputPWD = document.getElementById(‘loginPasswd‘);
        var capital = false;
        var capitalTip = {
            elem: document.getElementById(‘capital‘),
            toggle: function (s) {
                var sy = this.elem.style;
                var d = sy.display;
                if (s) {
                    sy.display = s;
                }
                else {
                    sy.display = d == ‘none‘ ? ‘‘ : ‘none‘;
                }
            }
        }
        var detectCapsLock = function (event) {
            if (capital) {
                return
            }
            ;
            var e = event || window.event;
            var keyCode = e.keyCode || e.which;
            var isShift = e.shiftKey || (keyCode == 16 ) || false;
            if (((keyCode >= 65 && keyCode <= 90 ) && !isShift) || ((keyCode >= 97 && keyCode <= 122 ) && isShift)) {
                capitalTip.toggle(‘block‘);
                capital = true
            }
            else {
                capitalTip.toggle(‘none‘);
            }
        }
        //判断是否是IE浏览器(解决自带的和自写的重复出现问题)
        function isIE() {
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                return true;
            }
            else {
                return false;
            }
        }

        //如果不是IE则进行手动提示
        if (!isIE()) {
            inputPWD.onkeypress = detectCapsLock;
            inputPWD.onkeyup = function (event) {
                var e = event || window.event;
                if (e.keyCode == 20 && capital) {
                    capitalTip.toggle();
                    return false;
                }
            }
        }
    }
</script>
</body>
</html>

需要注意:

需要通过获取焦点事件调用判断大写键盘锁定事件,如果直接调用会出现密码框失去焦点后切换大写锁定后再次进入密码框会出现大写锁定提示错误的问题

以上是关于js实现密码输入框对开启键盘大写锁定的提示(IE浏览器下有自动识别提示则不执行(用IE自带效果即可))的主要内容，如果未能解决你的问题，请参考以下文章

要求开启密码大写提示

怎么设置开机自动开启NumLock数字锁定键

jsp页面隐藏显示输入框后输入框对不齐，求指点！

mac切换大小写

Mac：使用大写锁定键切换输入法

笔记本电脑如何解锁