MC Press Online - TechTip: JavaScript Made Easy, Part II

TechTip: JavaScript Made Easy, Part II—Is Caps Lock On?

Tips & Techniques - Scripting
Written by Jan Jorgensen
Thursday, 11 October 2007
With JavaScript, you don't have to reinvent the wheel. Someone has always been there before you. Sometimes you discover things that make you say, "Well, that's clever!" If you have ever monitored a help desk, you know that Mr. Clumsy may have accidentally turned Caps Lock on when signing into Windows. If this happens, a message pops up stating that Caps Lock is on and that it might prevent the user from signing in correctly. I think this message is very clever, and I am sure it has saved a lot of calls to help desks. But what about your new Internet application you just released last week? Why is Mr. Clumsy calling in every morning to tell you that he cannot sign in? And ten minutes later, Ms. Clumsy has the same problem. Arghhh! Isn't it just a pain in the butt? Could it be possible to stop this kind of time waste? Well, JavaScript might do the job, so let's ask Google: Enter "javascript caps lock on." One of the first links points here, where you'll find an example, an explanation of how to install, and a button to highlight all the text. Copy all the text to an empty HTML document, save it, and test it. Of course, it works perfectly! Now you just have to copy it to your RPG-CGI program or PHP script or whatever else you wrote your Internet application in. The job is done, and Mr. and Ms. Clumsy will never waste your time on that subject again! But there could be some improvements to the JavaScript. For example, I do not like "alerts." I'd rather see a true message. So let's look at the function called checkCapsLock: `function checkCapsLock( e ) {` `var myKeyCode=0;` `var myShiftKey=false;` `var myMsg='Caps Lock is On.\n\nTo prevent entering your password` `incorrectly,\nyou should press Caps Lock to turn it off.';` `// Internet Explorer 4+` `if ( document.all ) {` `myKeyCode=e.keyCode;` `myShiftKey=e.shiftKey;` `// Netscape 4` `} else if ( document.layers ) {` `myKeyCode=e.which;` `myShiftKey=( myKeyCode == 16 ) ? true : false;` `// Netscape 6` `} else if ( document.getElementById ) {` `myKeyCode=e.which;` `myShiftKey=( myKeyCode == 16 ) ? true : false;` `}` `// Uppercase letters are seen without depressing the Shift key;` `therefore, Caps Lock is on` `if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {` `alert( myMsg );` `// Lowercase letters are seen while depressing the Shift key;` `therefore, Caps Lock is on` `} else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey` `) {` `alert( myMsg );` `}` `}` The first part is surely where all the key-press testing is done, and we will not touch that. So let's look at the variable called myMsg, which is initialized with the message "Caps Lock is On.\n\nTo prevent entering your..." Let's see if we can find it anywhere else in the script. It seems it appears two times and is being displayed with the alert, so that is where we will stick our fingers in. But how do you do it? Well, you might remember seeing something about showing text using a div tag and also something about innerhtml. Go back to Google and enter "innerhtml example." One of the first links points to "How to dynamically load any html file component." Find the section called "Changing HTML using DIV." Copy and paste the following under the first alert in your JavaScript: `"document.getElementById('DivExample').innerHTML="Good Afternoon";"` Now, replace the "Good Afternoon" with the variable called myMsg. And do the same after the next alert. Then, comment out the alerts by placing two slashes (//) in front of them. Your code should now look like this: `// Upper case letters are seen without depressing the Shift key,` `therefore Caps Lock is on` `if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {` `//alert( myMsg );` `document.getElementById("DivExample").innerHTML=myMsg;` `// Lower case letters are seen while depressing the Shift key,` `therefore Caps Lock is on` `} else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {` `//alert( myMsg );` `document.getElementById("DivExample").innerHTML=myMsg;` `}` Now, you just need the container called DivExample to hold the text. So we'll just add a new table at the bottom of the page, and it should look like this: `<!-- Make message look good -->` `<p>` `<table border="0">` `<tr>` `<td>` `<div id="DivExample"></div>` `</td>` `</tr>` `</table>` So now you have the following. (Please note that I have added a header and a <center> to make it look just a little better, but that should not spoil the joy.) `<HTML>` `<HEAD>` `<TITLE>` `JavaScript made easy part 2 - Checking CAPS lock` `</TITLE>` `<SCRIPT LANGUAGE="JavaScript">` `<!-- This script and many more are available free online at -->` `<!-- The JavaScript Source!! http://javascript.internet.com -->` `<!-- Original: jgw ( This e-mail address is being protected from spam bots, you need JavaScript enabled to view it ) -->` `<!-- Web Site: http://www.csua.berkeley.edu/~jgwang/ -->` `<!-- Begin` `function checkCapsLock( e ) {` `var myKeyCode=0;` `var myShiftKey=false;` `var myMsg='<b>Caps Lock is On. To prevent entering your` `password incorrectly, you should press Caps Lock to turn it off.</b>';` `// Internet Explorer 4+` `if ( document.all ) {` `myKeyCode=e.keyCode;` `myShiftKey=e.shiftKey;` `// Netscape 4` `} else if ( document.layers ) {` `myKeyCode=e.which;` `myShiftKey=( myKeyCode == 16 ) ? true : false;` `// Netscape 6` `} else if ( document.getElementById ) {` `myKeyCode=e.which;` `myShiftKey=( myKeyCode == 16 ) ? true : false;` `}` `// Upper case letters are seen without depressing the Shift` `key, therefore Caps Lock is on` `if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {` `//alert( myMsg );` `document.getElementById("DivExample").innerHTML=myMsg;` `// Lower case letters are seen while depressing the Shift` `key, therefore Caps Lock is on` `} else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) &&` `myShiftKey` `) {` `//alert( myMsg );` `document.getElementById("DivExample").innerHTML=myMsg;` `}` `}` `// End -->` `</script>` `</HEAD>` `<body>` `<center>` `<font size="5" color="#0000FF">JavaScript made easy part 2 - Checking if CAPS lock is on</font>` `<p>` `<FORM name="DataForm">` `<STRONG>Password:</STRONG>` `<INPUT TYPE="Password" NAME="Password" SIZE=16 MAXLENGTH=16 onKeyPress="checkCapsLock( event )">` `<P>` `<INPUT TYPE="Reset">` `</FORM>` `<!-- Make message look good -->` `<p>` `<table border="0">` `<tr>` `<td>` `<div id="DivExample"></div>` `</td>` `</tr>` `</table>` `</center>` `<p>` `</BODY>` `</HTML>` Save it and test. It should work perfectly except for one thing: The message is not removed when you deactivate Caps Lock. So go back to the script and find where the message is displayed. Insert an "else," which will blank out the <div> container if the two previous if's where not executed. Enter the following line: `} else {` `document.getElementById("DivExample").innerHTML=' ';` So now you have this: `// Upper case letters are seen without depressing the Shift key,` `therefore Caps Lock is on` `if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {` `//alert( myMsg );` `document.getElementById("DivExample").innerHTML=myMsg;` `// Lower case letters are seen while depressing the Shift key,` `therefore Caps Lock is on` `} else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) &&` `myShiftKey` `) {` `//alert( myMsg );` `document.getElementById("DivExample").innerHTML=myMsg;` `} else {` `document.getElementById("DivExample").innerHTML=' ';` `}` I just use the to insert a blank. Save and test. Voila! It works like a charm! If you made some mistakes, you can see the script in action here. Just right-click, display the source, and cut and paste. Who said JavaScript was difficult? Once again, my point is this: There is always some clever JavaScript guy out there on the wild Internet who has done what you want to do. Maybe it doesn't suit your needs 100 percent, but a little fantasy, some good search words, and the ability to cut and paste and combine things will lead you down the right path, the land filled with JavaScript and HTML examples. Till next time, keep up the good spirit, learn JavaScript and PHP, and combine them with your RPG skills. You'll be invincible!
Last Updated ( Friday, 07 December 2007 )

Discuss (5 posts)

Guest.Visitor

TechTip: JavaScript Made Easy, Part II—Is Caps Lock On?
Oct 28 2007 21:19:00

Check password. If correct, allow in; else, Check for all caps. Send appropriate message.

#113692

Guest.Visitor

TechTip: JavaScript Made Easy, Part II—Is Caps Lock On?
Oct 28 2007 12:49:00

I am using Firefox ver 2.0.0.8 and it works fine for me. This isn't really about the caps lock key, it's the SHIFT key - detecting if that (SHIFT) is pressed or not and if the typed characters are upper case or not. If no shift key is pressed and letters are upper case, the caps lock must be on. Of course, this won't work if someone pastes into the field. Chris

#113691

Guest.Visitor

TechTip: JavaScript Made Easy, Part II—Is Caps Lock On?
Oct 28 2007 04:17:00

Hi, As I see it this is one of these things that happens when creating web solutions - although there are specifications layed out there will always be differences in the way browsers handles things and this seems to be one of them. I have not found a soloution to the Firefox problem but I did find a very interesting page about the subject. Have a look at: <a href="http://www.quirksmode.org/js/keys.html">http://www.quirksmode.org/js/keys.html</a> Best regards 
- Jan

#113690

Guest.Visitor

TechTip: JavaScript Made Easy, Part II—Is Caps Lock On?
Oct 25 2007 03:25:00

Works well in IE...but not in FireFox 2.0 well, it detects if the characters are in uppercase, but not if the caps key is pressed. If you hold down shift and type, it treats that as if caps lock is on. Obviously if the user is holding shift, they want capitals. sorry... :(

#113689

MC Press Web Site Staff

TechTip: JavaScript Made Easy, Part II—Is Caps Lock On?
Oct 28 2007 21:19:00

This is a discussion about TechTip: JavaScript Made Easy, Part II—Is Caps Lock On?.<a href=http://www.mcpressonline.com/mc?1@232.1KNKfHX1eQT.17@.6b50a716>Click here for the article</a>.

#113688