6

In my research, I've found how to detect capslock when the caps key is pressed. However, I want to know the caps status even in cases when the key is not touched.

example: alert(ui.Keyboard.capslock) // would return true or false;

Thanks!

Jacksonkr
  • 31,583
  • 39
  • 180
  • 284
  • 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) – Martin Smith Mar 20 '11 at 21:54
  • Looks like the poster there was satisfied with a solution that involved using a caps key press (which I'm not). close to the same though. – Jacksonkr Mar 20 '11 at 22:20
  • Whoops I completely missed the "even in cases when the key is not touched" part as did Mike Lewis by the look of things. Doubt that this is possible but it is a different question. – Martin Smith Mar 20 '11 at 22:24
  • Yeah, I doubt it is possible too. I'll probably end up having to wait until a key is pressed like everyone else :( – Jacksonkr Mar 20 '11 at 23:10

3 Answers3

2

No, you cannot get the state of a keyboard button on page load. You have to analyze a keyCode of a keypress. That is the only way.

JustBeingHelpful
  • 18,332
  • 38
  • 160
  • 245
  • How is it then that google and yahoo are able to do it? If you take a look at their login forms for mail etc... they are able to detect the caps lock on load? – Ben Crowhurst Feb 05 '12 at 13:05
  • Seriously? Can you send me the URLs? I didn't see a caps lock message on those, but it's Monday and early. Someone else told me on this thread that it's not possible, so now I'm very interested. http://stackoverflow.com/questions/9060073/check-scroll-lock-num-lock-caps-lock-in-javascript-on-page-load/9060090#comment11387478_9060090 – JustBeingHelpful Feb 06 '12 at 15:41
  • @BenCrowhurst ummm - I don't see it at page load.. (?) Couldn't find anything on Google, but on yahoo, they do use code which can be un-minified ("maxified"? "de-minified"?) and made to use more meaningful variable names to end up looking awfully similar to the solution outlined on [this page](http://dougalmatthews.com/articles/2008/jul/2/javascript-detecting-caps-lock/) (linked in Mike Lewis' answer). – Code Jockey Mar 27 '12 at 22:03
  • If you are on mac and using chrome or safari, then you'll see an icon that lets you know you pressed capslock. This is standard behavior for the password input fields. In Firefox this doesn't work. Perhaps this is a webkit thing. – Robert Cabri May 22 '12 at 08:27
1

I've just come up with an alternative which will detect the state of caps lock and store it so that if the caps lock key is pressed a warning can be turned on and off. I'm only coding for chrome 45+ and ie9+ so there may need to be some adjustments for general use if that is your plan.

Here's my html:

<input type="text" id="pwd">
<p id="caps"></p>

And here's the js:

var LOGINPAGE = LOGINPAGE || {};
LOGINPAGE.CAPSdetect = {};
$(function() {
    LOGINPAGE.CAPSdetect.engage();
});

LOGINPAGE.CAPSdetect.isDetected = false;
LOGINPAGE.CAPSdetect.capsOn = false;

LOGINPAGE.CAPSdetect.engage = function() {
    $('#pwd').on('keypress', LOGINPAGE.CAPSdetect.shiftDetect);
    $(window).on('keydown', LOGINPAGE.CAPSdetect.capsDetect);
}

LOGINPAGE.CAPSdetect.shiftDetect = function(event) {
    var caps = $('#caps');
    var which = event.keyCode;
    var shift = event.shiftKey;
    var targ = event.target;
    if ((which >= 65 && which <= 90 && !shift) || (which >= 97 && which <= 122 && shift)) {
        caps.html('CAPS LOCK IS ON').css('color', 'crimson');
        LOGINPAGE.CAPSdetect.isDetected = true;
        LOGINPAGE.CAPSdetect.capsOn = true;
    } else if((which >= 65 && which <= 90 && shift) || (which >= 97 && which <= 122 && !shift)){
        caps.html('');
    }
}

LOGINPAGE.CAPSdetect.capsDetect = function(event) {
    if(event.keyCode === 20 && LOGINPAGE.CAPSdetect.isDetected) {
        LOGINPAGE.CAPSdetect.capsOn = (LOGINPAGE.CAPSdetect.capsOn)? false:true;
        if(LOGINPAGE.CAPSdetect.capsOn) {
            $('#caps').html('CAPS LOCK IS ON');
        } else {
            $('#caps').html('');
        }
    }
}

I'm using namespaces to avoid globals for isDetected and capsOn hence the LOGINPAGE.CAPSdetect. before some functions and variables. See this jsfiddle for no namespacing and to test it out.

JoeMilo
  • 123
  • 1
  • 10
  • 1
    As far as I can tell this still relies on a key being pressed, so this doesn't answer the OP's question. – zeeMonkeez Nov 20 '15 at 19:22
  • No, it does not answer the OP's question, you are right. Someone already answered with a, 'that's not possible' and as far as I know that is accurate and so instead of leaving the OP with an open ended 'NO WAY', wouldn't it be useful to say, 'Hey pal, that can't happen, but you might try this...'? You obviously find this an inadequate use of SO and I would surely like to know why seeing as people come here for solutions to problems they have, not simply answers of the type 'yes' or 'no'. Furthermore, if you have a solution that does not rely on key press post it! Be productive or don't post! – JoeMilo Nov 23 '15 at 15:20
1

Try this code:

    <script language="Javascript">
function capLock(e){
 kc = e.keyCode?e.keyCode:e.which;
 sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
 if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
  document.getElementById('divon').style.visibility = 'visible';
   document.getElementById('divoff').style.visibility = 'hidden';
 }else{
  document.getElementById('divon').style.visibility = 'hidden';
   document.getElementById('divoff').style.visibility = 'visible';
}
}
</script>
<input type="text" name="trackcaps" onkeypress="capLock(event)" />
<div id="divon" style="visibility:hidden">Caps Lock is on.</div>
<div id="divoff" style="visibility:hidden">Caps Lock is off.</div>
Pankaj Chauhan
  • 1,623
  • 14
  • 12