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>

需要注意:

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

posted @ 2019-01-18 11:07  孤单玻璃杯  阅读(1596)  评论(0)  编辑  收藏  举报