CODEWITHSUNDEEP
javascriptangularjscapslock
satya
satya

Reputation: 3560

How to detect while caps lock is on/off using angular.js

I need one help.I have one password filed validation which only takes the special character.At the time of typing password if user is typing any upper case letter the caps lock on notification will display and when it will off the message should display also.Please check my existing code below.

<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'has-error': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="{{inputType}}" name="pass" id="contactno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[A-Z])(?=.*\d)(?=.*[a-z]).*_.*/" >
</div>
</div>
<div class="help-block" ng-messages="billdata.pass.$error" ng-if="billdata.pass.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your password should be 8.</p>
<p ng-message="pattern" style="color:#F00;">This field needs the special character like at least one number,upper case,lower case letter and underscore.</p>

</div>

Please help me to resolve this problem.

Upvotes: 1

Views: 4716

Answers (3)

Saad Joudi
Saad Joudi

Reputation: 623

For angularJS developers, here's a working example to check if the button is activated or not :

On your JS file :

  $scope.checkCase = function(event) {
        var isOn = event.originalEvent.getModifierState('CapsLock');
        if (isOn) {
            console.log('ON');
        }
    };

HTML : Add this to your INPUT :

 ng-keyup="checkCase($event)"

Upvotes: 0

NullPoiиteя
NullPoiиteя

Reputation: 57322

this can be done using ngCapsLock module

include relevent js and specify ngCapsLock as a dependency:

angular.module('myApp', ['ngCapsLock']);

then

<p class="caps-lock-alert" ng-show='isCapsLockOn'>Caps lock is on</p>

ngCapsLock

Upvotes: 1

ngLover
ngLover

Reputation: 4578

Simple library with capslock support.

Using CapsLock.js

The current status of the caps lock key can be determined using the isOn function, which returns true if caps lock currently appears to be on and false if it appears to be off:

// check the state of the caps lock key
if (CapsLock.isOn()){

  // caps lock is on

}

http://code.stephenmorley.org/javascript/detecting-the-caps-lock-key/

Upvotes: 1

Related Questions