0

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

1 Answers1

0

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();
          }
    });
  });
mehdi354
  • 413
  • 3
  • 5