6
\$\begingroup\$

I've written this JQuery program for checking whenever caps lock is turned on.

$("input[type='password']").keypress(function(e) {
    var kc = e.which; //get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        capLock(); // alerts "CAPSLOCK is ON"
    }

});
function capLock() {
 alert('CAPSLOCK is ON');
}
\$\endgroup\$
  • \$\begingroup\$ @Ethan. Your profile says you're from Minneapolis. Your language usage says you're from Northern Ireland. (Using whenever for when is a distinctive of Norn Iron usage.) \$\endgroup\$ – TRiG Jun 10 '15 at 9:00
  • 1
    \$\begingroup\$ @TRiG Hmm. Interesting. Some of my family is from Ireland, and we do have some Irish ancestry.... \$\endgroup\$ – Ethan Bierlein Jun 10 '15 at 15:14
7
\$\begingroup\$

Turning my comment on your question into an answer:

On a Mac, when the Caps Lock key is engaged, the Shift key doesn't change the case to lower. So in the event that the Caps Lock key has already been engaged, before your page even loads, this code won't work as intended. I believe this jQuery plugin has already solved this problem - github.com/nosilleg/capslockstate-jquery-plugin


As for your code itself:

  1. I like that you've got named variables, that makes the final if statement super easy to read. You could name the event variable as such too, so it's clearer what e contains.
  2. You can refactor this var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase

to:

var isUp = (kc >= 65 && kc <= 90) // uppercase

because (kc >= 65 && kc <= 90) evaluates to a boolean value. The conditional operator is redundant.

  1. Similarly, you can refactor: var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false );

to:

var isShift = ( e.shiftKey ) || (kc == 16);

The interesting thing about the statement above is that it takes advantage of a mechanism called short-circuit evaluation that boolean operators, like OR (||) and AND (&&), use.

Basically, in an OR statement, if the first expression evaluates to true, the second expression is never evaluated, because true || anything will always evaluate to true.

Similarly for an AND statement, if the first expression evaluates to false, the second expression is never evaluated, because false && anything will always evaluate to false.

\$\endgroup\$
  • \$\begingroup\$ Actually on a Mac, when Capslock is on, the Shift key has no effect on whether the letters are lowercase, the result will always be uppercase. This happens on Windows platforms however. \$\endgroup\$ – JamesENL Jun 10 '15 at 8:48
  • \$\begingroup\$ @James huh interesting. I could swear I typed "doesn't change", I just copy pasted my comment from before which has disappeared. Thanks for pointing that out, edited my answer. \$\endgroup\$ – Vidur Jun 10 '15 at 9:21
  • \$\begingroup\$ @Vidur that looks clean and easy to understand i will incorporate that one on my current code \$\endgroup\$ – guradio Jun 11 '15 at 2:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.