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>

需要注意:

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

相关阅读:
chrome请求cgi遇到net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
office激活秘钥
 Dynamic 365 中创建编码规则
 D365FO Tool – Automating Start and Stop Environments
InventReserve on InventTable form button script
XSLT Transformation XML to JSON D365FO Data Management
Get started with deployment pipelines
[Azure DevOps Dynamics] Automate CRM Solution Deployment
Deploying Web resources or Plugins with Azure DevOps Pipeline
Deploy and use a continuous build and test automation environment for Dynamics 365
原文地址：https://www.cnblogs.com/zhoushuang0426/p/10283314.html