2

I have a web-based login form, and I want to notify the user if their Caps Lock key is on, especially when they're typing their password. How can I do this?

Something like: User types username, then focuses on password then if caps lock key is on, a tooltip or popup shows telling the user that caps key is on

Þaw
  • 2,047
  • 4
  • 22
  • 39
  • Haven't tried anything. I definitely don't have any idea :( – Þaw Apr 25 '13 at 02:45
  • 3
    Take a look at this [answer](http://stackoverflow.com/a/348802/1437783). Should be enough to get started. – ljfranklin Apr 25 '13 at 02:45
  • possible duplicate of [How do you tell if caps lock is on using JavaScript?](http://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-using-javascript) – pickypg Apr 25 '13 at 02:49
  • I tried the code given in that but I get the error **isCapsLock is not defined**. what does that mean? – Þaw Apr 25 '13 at 03:02
  • I'd like to have the tooltip popup whenever the user has its focus to password textbox – Þaw Apr 25 '13 at 03:07

4 Answers4

1

try this plugin, you can monitor the caps lock state in a textbox or DIRECTLY in the entire window: https://github.com/nosilleg/capslockstate-jquery-plugin

Alberto Fecchi
  • 1,705
  • 12
  • 27
  • If you want to load a 4,000 line library and add a 100 line plugin to do the work of 4 lines of code… – RobG Apr 25 '13 at 03:28
  • I was already using the JQuery library, since I've been using twitter-bootstrap, and the lines of code from the plug-in is just almost the same with the answers given from the links. Ü – Þaw Apr 25 '13 at 03:46
0

You can do the following with jQuery

var CAPS_LOCK = 17; //Constant for caps lock key value

$('#myPasswordField').keypress(function(e) { 
    var keyCode = e.keyCode ? e.keyCode : e.which;
    if ( keyCode === CAPS_LOCK ) {
        alert('Caps lock pressed');
    }
});

For more info on key values: For key values see http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html

ricardohdz
  • 579
  • 4
  • 9
  • What if the caps key is already "on" and hence there is no separate key event for it? In Safari, pressing caps lock does not initiate a key event. – RobG Apr 25 '13 at 02:54
  • Try this http://stackoverflow.com/questions/2308895/detect-caps-lock-on-off-using-jquery – ricardohdz Apr 25 '13 at 02:59
0

There is no current standard for key events and there doesn't appear to be an event property indicating the state of the caps lock key, though it might be provided in future.

The only reasonably reliable way to test for caps lock seems to be to see if the key code is a capital letter and the shift key is not pressed, e.g.

function capsLockOn(e) {
  var code = e.keyCode || w.which;

  if (code >64 && code < 97 && !e.shiftKey) {
    return true;
  }
  return false;
}

On some keyboards, the caps lock only affects keys a to z so you can't reliably test others. Pressing the caps lock key doesn't initiate a key event and would not work reliably anyway since the caps lock might be on before there's a chance to initiate an event.

Or if brevity is your thing:

function capsLockOn(e) {
  var code = e.keyCode || w.which;
  return code > 64 && code < 97 && !e.shiftKey || void 0;
}
RobG
  • 142,382
  • 31
  • 172
  • 209
0

Along with JQuery you will need to add Twitter's Bootstrap in order to enable some effects. Here is your working code.

html

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<input type="password" id="myPasswordField" name="myPasswordField" data-content="Caps Lock is on!"></input>

Javascript

$('#myPasswordField').keypress(function (e) {
    var s = String.fromCharCode(e.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
        $this = $(this);
        $this.popover('show').click(function (e) {
            $this.popover('hide');
            e.preventDefault();
        });

    }
});
CodeArtist
  • 5,534
  • 8
  • 40
  • 65