Check Cap Lock Form

Activate your Caps Lock and try it!

If a user enters his password in a Web-based form with Caps Lock accidentally on, he can become frustrated because his password is not being accepted... and he may assume the application is the source of the problem. This JavaScript function will let the user know his Caps Lock is on and about the potential for error.

We have tested the code in IE 7.0, Firefox 2.0.0.7, Opera 9.23, Opera 9.50 Alpha, Netscape 9.0RC1, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms, and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is a two (2) part (minimal if any reconfigurations*) copy and paste code that goes in the <BODY> section (both parts-javascript and form element) ( form element incorporated into a working form) of your document.

* The only reconfiguration would be that of changing the wording on the alert message that will appear if your Caps Lock is on. This reconfiguration is located within the <SCRIPT LANGUAGE="JavaScript"> section of the code. See below where and howto;

<!-- Begin
function checkCapsLock( e ) {
var myKeyCode=0;
var myShiftKey=false;
var myMsg='Caps Lock is On.\n\n
To prevent entering your password incorrectly,\n
you should press Caps Lock to turn it off.';

// Internet Explorer 4+

Notice: in the above code the \n
Each \n denotes a line break.
So in the first line of code there are two \n\n denoting two line breaks then the next line of text.
This is the only reconfiguration that can be made within this effect.

Caps Lock Alert Message

Point Of Information Since most forms are just totally bloated with material, it may be a good idea to make the Javascript part of this code into an external.js file to save space. If you need a little refresher on where and howto to this, see the below.

Default

<SCRIPT LANGUAGE="JavaScript">

<BODY> section of code is here
just copy and paste this section without the opening and closing script tags into a notepad, save as checkCapsLock.js (or whatever you want to call the file) to your harddrive and upload to your directory

// End -->
</script>

What's Left After You Save As

This is what you will have once you remove the opening and closing script tags and save as. Click on the icon and you will see what you have saved as and need to upload to your directory.
Once you have saved as and uploaded the code as an external.js file, now paste the below snipplet of code into the <BODY> section of your document.
Snipplet of code for <BODY> section
Paste the below directly above the form element for this effect.

<script type="text/javascript" src="checkCapsLock.js"> </script>

If you would like to see an example of this effect using an "external.js" file method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ External.js File Method ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ] [ Scripts In Conflict ]