Search code examples
javascriptinternet-explorer-10capslock

Is there a way how to detect IE10's "Caps Lock is on" feature?


As you probably know, there is a relatively simple way how to, more or less reliably, detect whether Caps Lock is on, especially when user starts typing into password fields. However, it is a quite unknown fact that IE10 supports this feature automatically, without need for any additional coding (source, direct link to screenshot and a simple demo). Thus, now I'm facing a problem because if I add a similar Javascript funcionality, IE10 users will see two "bubbles" with the warning, one created by my script and one created by their browser; this might look ugly or even be confusing. This is why I'm looking for a solution how to detect whether browser has this functionality built-in or not; I hope it triggers some event or changes some property, but I haven't found anything like this.

I might just look for Trident/6.0 in user agent string, but I'd rather like to avoid browser detection; it would probably also require some code maintenance if other browsers add similar feature.

If there is no reliable solution, I'll ask the IE Team to add the ability of "caps-lock-is-on feature" detection and probably also the editors of HTML specification to require vendors to do this.


Solution

  • You can determine whether IE will be showing its own caps-lock warning by checking the value of the msCapsLockWarningOff property on the document itself. Further, you can toggle this on and off:

    document.msCapsLockWarningOff = true;
    

    Fiddle: http://jsfiddle.net/jonathansampson/mqcHA/1/
    MSDN: msCapsLockWarningOff property