20

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.

Community
  • 1
  • 1
duri
  • 14,991
  • 3
  • 44
  • 49
  • 2
    There is no standard for exposing this default behavior. So no way to feature test, so user agent matching is the only way. Or you could try to position you bubble under the default bubble (assuming the browsers bubble is always on top), so its is blocked and not 'visible' – Gerben Aug 11 '11 at 18:06
  • @Gerben Thank you for your comment. As it seems your summary respectably describes the current state and the possible solutions, feel free to add your response as an answer; I'll probably set it as accepted if there doesn't appear any magic solution. – duri Aug 11 '11 at 18:54
  • Does setting the `novalidate` attribute on the containing form have any effect on the balloon behavior?. The documentation seems to suggest that this disables the built-in validation functions - although it is unclear if this is when the form is submitted or if suppresses the inline checking on the elements... – Fraser Aug 30 '11 at 00:50

3 Answers3

14

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

Sampson
  • 265,109
  • 74
  • 539
  • 565
1

I suggest you checkout this tutorial http://www.upsdell.com/BrowserNews/res_sniff.htm

you may try something like this

<!--[if gte IE 10]>
    <script type="text/javascript">
        var isTrulyIE = true;
    </script>
<![endif]-->

or javascript version on detecting and prototyping the browser version

 this.isIE10 = (this.version == "10.0") || (this.ua.indexOf("trident/6") != -1);

you may also try the script defined by microsoft to decide the IE browser version http://support.microsoft.com/kb/167820

Njax3SmmM2x2a0Zf7Hpd
  • 1,354
  • 4
  • 22
  • 44
-1

You can capture the keyboard event and detect the key, but you cannot determine the caps-lock STATE.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • 1
    Thank you for your interest in answering the question. However, it seems you have misunderstood the question; please read it carefully. I have no problem with detecting the Caps Lock, I'm looking for a way how to determine whether to show the warning to the user or the browser does it on its own. – duri Aug 11 '11 at 18:55