js實現密碼輸入框對開啟鍵盤大寫鎖定的提示(IE瀏覽器下有自動識別提示則不執行(用IE自帶效果即可))

本文轉載自查看原文 2019-01-18 11:07 750 IE自帶提示/ js/ 密碼框/ 大寫鎖定提示

代碼如下:

<!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>

需要注意:

需要通過獲取焦點事件調用判斷大寫鍵盤鎖定事件,如果直接調用會出現密碼框失去焦點后切換大寫鎖定后再次進入密碼框會出現大寫鎖定提示錯誤的問題

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【JS】【29】解決瀏覽器自動填充密碼輸入框的問題 layui 解決瀏覽器自動填充form表單賬號和密碼輸入框的問題輸入密碼時提示大寫鎖定已打開 JS 實現兼容IE瀏覽器報警提示聲音去除 IE input X 去掉文本框的叉叉和密碼輸入框的眼睛圖標 jquery插件--在input下輸入密碼時提示大寫鎖定鍵 react antd 解決表單中的賬戶和密碼輸入框記住瀏覽器密碼並回填到輸入框的問題 iOS密碼輸入框的實現 IE瀏覽器input輸入框type="password"樣式修改小玩意1-實時獲取IE瀏覽器輸入框URL地址