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. To prevent entering your password
incorrectly, you 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. To 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:
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:
<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 email address is being protected from spambots. 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:
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!
LATEST COMMENTS
MC Press Online