because the keydown event uses the previous state of a variable to do the switch, if something like exiting the screen interferes (a click somewhere outside) + pressing CAPS LOCK once, when coming back, the message is the other way around.

so now, when pressing CAPS LOCK without entering a letter, the message is misinforming.

if, however a letter is pressed, the behavior goes back to normal.

I found here a solution to this issue (see awe's comment):
http://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-using-javascript

to get to the point:

//Disable on window lost focus (because we loose track of state)
  $(window).blur(function(e){
    // If window is inactive, we have no control on the caps lock toggling
    // so better to re-set state
    var pass = document.getElementById("password");
    if(typeof(pass.caps) === 'boolean'){
      pass.caps = null;
      $(pass).next('.caps-lock-warning').hide();
    }
  });

I may be missing something here but what if Caps Lock is already on, surely your script will be starting from an invalid premiss.

If caps lock is on and the document is loaded and you detect a key press/ key up then set key press true and its actually invalid then this script is incorrect?

The problem is with DI, you have to add $inject to provider.

(reproduced in Chrome (48.0.2564.103) on Windows, but could not be browser related)

• set Caps Lock to OFF
• reload the page
• start typing letters
• press Caps Lock

=> first push does not set it to ON (is caught by KeyUp)

• press Caps Lock again

=> second push sets it to ON (is caught by KeyDown) but the real state is OFF
from this moment on, toggling the Caps Lock is messed up, until a new letter is pressed

I found here a good example of a working implementation: it also considers international letters
http://javascript.info/tutorial/keyboard-events#working-with-scan-codes-keydown-keyup

Could you please publish a new release version with the module?

I encountered an issue when pressing the caps lock for the 1st time after entering a text. Please refer following steps to recreate the issue.

1. Keep Caps lock off.
2. Load a fresh page.
3. Enter some text.
4. Press the caps key to enable caps - > Caps enabled icon is hidden.
5. Press the caps key to disable caps -> Caps enabled icon is visible.
6. Press the caps key to enable caps - > Caps enabled icon is hidden.

Same thing happens until you enter a character. After entering a character it is working as expected.

I was able to fix this issue by adding “isKeyPressed = false;” after line 40 “if (code > 64 && code < 91) { setCapsLockOn(!shift); } “. I am not sure whether this is the correct fix but after adding this above issue was fixed.

Thanks.

I got the following error:

Error: [CE Error] [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.6.6/$rootScope/inprog?p0=%24digest
Stack trace:
minErr/<@http://localhost:3000/bower_components/angular/angular.js:116:12
beginPhase@http://localhost:3000/bower_components/angular/angular.js:18786:15
$apply@http://localhost:3000/bower_components/angular/angular.js:18521:11
setCapsLockOn@http://localhost:3000/bower_components/ngCapsLock/ng-caps-lock.js:7:7
@http://localhost:3000/bower_components/ngCapsLock/ng-caps-lock.js:58:7

while testing in Firefox 59.

It comes from:

function setCapsLockOn (isOn) {
      $rootScope.isCapsLockOn = isOn;
      $rootScope.$apply();
    };

I think for it would be safer to better use a $timeout, that safely triggers the angular digest cycle

function setCapsLockOn (isOn) {
      $timeout(function(){
            $rootScope.isCapsLockOn = isOn;
      });
    };