jquery插件--在input下輸入密碼時提示大寫鎖定鍵

    //密碼大寫輸入提示
    function capitalTip(id){
        $('#' + id).after('<div class="capslock" id="capital_password"><span>大寫鎖定已開啟</span></div>');
        var capital = false; //聚焦初始化，防止剛聚焦時點擊Caps按鍵提示信息顯隱錯誤
        
        // 獲取大寫提示的標簽，並提供大寫提示顯示隱藏的調用接口
        var capitalTip = {
            $elem: $('#capital_'+id),
            toggle: function (s) {
                if(s === 'none'){
                    this.$elem.hide();
                }else if(s === 'block'){
                    this.$elem.show();
                }else if(this.$elem.is(':hidden')){
                    this.$elem.show();
                }else{
                    this.$elem.hide();
                   }
            }
        }
        $('#' + id).on('keydown.caps',function(e){
            if (e.keyCode === 20 && capital) { // 點擊Caps大寫提示顯隱切換
                capitalTip.toggle();
            }
        }).on('focus.caps',function(){capital = false}).on('keypress.caps',function(e){capsLock(e)}).on('blur.caps',function(e){
            
            //輸入框失去焦點，提示隱藏
            capitalTip.toggle('none');
        });
        function capsLock(e){
            var keyCode = e.keyCode || e.which;// 按鍵的keyCode
            var isShift = e.shiftKey || keyCode === 16 || false;// shift鍵是否按住
            if(keyCode === 9){
                capitalTip.toggle('none');
            }else{
              //指定位置的字符的 Unicode 編碼 , 通過與shift鍵對於的keycode，就可以判斷capslock是否開啟了
              // 90 Caps Lock 打開，且沒有按住shift鍵
              if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
                  // 122 Caps Lock打開，且按住shift鍵
                  capitalTip.toggle('block'); // 大寫開啟時彈出提示框
                  capital = true;
              } else {
                  capitalTip.toggle('none');
                  capital = true;
              }
            }
        }
    };

再來看效果

 

測試地址： http://sms.reyo.cn 用戶名：aa 密碼：123456