Password Field CAPS LOCK Warning

{{7/16/2015 Workflow 7.6 update — review this update for new info on this post.}}

A few days ago I spent about 10 minutes researching why my AD credentials were busted, only to realize I had caps lock turned on.  I built this for people like myself who sometimes go moon-brained.

Here’s a quick how-to on adding a CAPS LOCK warning to your login forms.  If you’re using a modern version of IE, this feature will be built-in.  For any other modern browser, however, we’ll need to add one if we want it.

CAPSdemo

There’s a bit of a stipulation to this concept – we can only determine the state of Caps Lock indirectly, and we can only do so when a capital-able key is pressed.  So for example, a number won’t fire the warning, nor will a special character.  We can also only rely on a key press to run the function – oninput, onchange, onfocus, etc, will not work.

Anyways, here’s the setup.

In the demo, I’m using an Image component and an Ascii Merge Label (a Label would work just as well in this case) for the warning popup.  I’m setting the style key to .aHiddenElement, which initially loads the elements as not visible.  When triggered, javascript will replace the class with a visible class.  Both warning components have Control Ids set.

I’m using two TextBox components, one of which is a password type (set in the component settings).  The password field needs a Control Id.  Add a Button for good measure.

Finally, add an IncludeHTML component to handle our CSS code.

Here is the CSS used in the demo (remember to wrap the entire code block in style tags):


.gaButton {
text-transform: uppercase;
font-family: Verdana, Serif;
font-size: 12px;
border: none;
text-align: center;
color: white;
background-color: #524d6f;
outline: none !important;
padding-bottom: 2px;
-webkit-appearance: none;
border-radius: 0;
}

.gaLabel {
color: #999999;
font-family: Verdana, Serif;
text-align: left;
font-size: 12px;
-webkit-font-smoothing: antialiased;
padding-top: 4px;
}

.gaInfoLabel {
color: #999999;
font-family: Verdana, Serif;
text-align: left;
font-size: 12px;
-webkit-font-smoothing: antialiased;
padding-top: 4px;
}

.gaInput {
outline: none;
border: none !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.05);
font-size: 14px;
font-family: Verdana, Serif;
padding-left: 6px;
padding-bottom: 2px;
background-color: #f7f7f7;
color: #999999;
-webkit-appearance: none;
border-radius: 0;
}
.gaInput:focus {
background-color: #ffffff !important;
color: #525252 !important;
outline: none;
}

.gaHiddenElement {
visibility:hidden;
}

.aShowElement {
visibility: visible !important;
}

In the form’s Script section, we will write the javascript functions (2) that handle the Caps evaluation:


function isCapsLockOn(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
var shiftKey = e.shiftKey ? e.shiftKey : ((keyCode == 16) ? true : false);
return (((keyCode >= 65 && keyCode <= 90) && !shiftKey) || ((keyCode >= 97 && keyCode <= 122) && shiftKey))
}

function showCapsLockMsg(e) {
var capsImage = document.getElementById('CAPSImage');
var capsLabel = document.getElementById('CAPSLabel');
var warningElement = document.getElementById('capsLockWarning');
if (isCapsLockOn(e)) {
capsImage.className = 'aShowElement';
capsLabel.className = 'gaLabel';
} else {
capsImage.className = 'gaHiddenElement';
capsLabel.className = 'gaHiddenElement';
}
}

This function setup basically checks to see if the Shift key is being pressed, and if it isn’t, but the letter being pressed is capitalized, it assumes Caps Lock is pressed.

There’s some extraneous style and UX code added to the body onload event for good measure (included in the demo), and then we call the functions from the password field.

In the TextBox component used for the password, add a custom event for “onkeypress”, and add this javascript function call:


showCapsLockMsg(event);

That should do it!  Check the Demos page for a demo package.


Featured Components

TextBox

IncludeHTML

Button

Image

Ascii Merge Label


Further Reading

CSS and Workflow

Javascript and Workflow


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s