how to show caps lock is on error message when we press capslock key?

Question

how to show caps lock is on error message when we press the capslock key in keyboard? it works with commented part it actully i need like uncommented input password with lable tag! i had to show only error message if we press the capslock key even if not press nothing need to do !

  <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();
        }
        });
    });

Answer 1

You can try following code:

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>

Jquery:

$(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();
          }
    });
  });