当我们按下 capslock 键时，如何显示 caps lock is on error message？答案

【问题标题】：how to show caps lock is on error message when we press capslock key?当我们按下 capslock 键时，如何显示 caps lock is on error message？
【发布时间】：2023-01-03 15:38:49
【问题描述】：

当我们按下键盘上的大写锁定键时，如何显示大写锁定处于错误消息中？它与注释部分一起使用它实际上我需要像带有标签标签的未注释输入密码！如果我们按下 capslock 键，我必须只显示错误消息，即使不按下也不需要做任何事情！

  <div class="form-group">
        <label for="password">Password<span class="star"> *</span></label>
            <div class="input-group">
               <div class="input-group-prepend bg-transparent">
                    <span class="caps-lock-warning" style="color: brown;">caps lock is on.</span>
                    <i class="fa fa-lock text-dark"></i>
                    </span>
               </div>
                <input type="password" class="form-control form-control-lg border-left-0" id="password" placeholder="Password" name="password" required autocomplete="off">
                </div>
            </div>
    <!-- <div>
        <input type="password" id="password" />
        <span class="caps-lock-warning" style="color: brown;">caps lock is on.</span>
    </div>
     -->
<script>
    $(function(){
    $('.caps-lock-warning').hide();
  
    $("#password").keypress(function(e) {
      var s = String.fromCharCode( e.which );
      if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)||
         (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        this.caps = true; 
        $(this).next('.caps-lock-warning').show();
      } else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
                (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {
        this.caps = false; 
        $(this).next('.caps-lock-warning').hide();
      }
    });
  
    $(document).keydown(function(e){
      if(e.which==20){
        var pass = document.getElementById("password");
        if(typeof(pass.caps) === 'boolean'){
          pass.caps = !pass.caps;
          $(pass).next('.caps-lock-warning').toggle(pass.caps);
        }
      }
    });
  
    $(window).blur(function(e){

        var pass = document.getElementById("password");
        if(typeof(pass.caps) === 'boolean'){
            pass.caps = null;
            $(pass).next('.caps-lock-warning').hide();
        }
        });
    });

【问题讨论】：

标签： javascript html jquery passwords capslock

【解决方案1】：

您可以尝试以下代码：

HTML:

  <div class="form-group">
        <label for="password">Password<span class="star"> *</span></label>
            <div class="input-group">
               <div class="input-group-prepend bg-transparent">
                    <span class="caps-lock-warning" style="color: brown;">caps lock is on.</span>
                    <span><i class="fa fa-lock text-dark"></i>
                    </span>
               </div>
                <input type="password" class="form-control form-control-lg border-left-0" id="password" placeholder="Password" name="password" required autocomplete="off">
                </div>
            </div>

查询：

$(function(){
    $('.caps-lock-warning').hide();
  
    $("#password").keypress(function(e) {
            e = e || window.event;
          var s = String.fromCharCode( e.keyCode || e.which );
          if ( (s.toUpperCase() === s) !== e.shiftKey ) {
             $(this).closest('.input-group').find('.caps-lock-warning').show();
          }else {
          $(this).closest('.input-group').find('.caps-lock-warning').hide();
          }
    });
  });

【讨论】：