24
Sun, Nov
1 New Articles

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

Scripting
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times
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. 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:

"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 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:

} else {
 document.getElementById("DivExample").innerHTML='&nbsp;'; 

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='&nbsp;'; 
}

I just use the &nbsp; 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!

Jan Jorgensen

Jan Jorgensen is one of the owners of www.reeft.dk, which specializes in mobile and i5 solutions. He works with RPG, HTML, JavaScript, Perl, and PHP. You can reach him at This email address is being protected from spambots. You need JavaScript enabled to view it.

 

BLOG COMMENTS POWERED BY DISQUS

LATEST COMMENTS

Support MC Press Online

$

Book Reviews

Resource Center

  • SB Profound WC 5536 Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application. You can find Part 1 here. In Part 2 of our free Node.js Webinar Series, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Brian will briefly discuss the different tools available, and demonstrate his preferred setup for Node development on IBM i or any platform. Attend this webinar to learn:

  • SB Profound WP 5539More than ever, there is a demand for IT to deliver innovation. Your IBM i has been an essential part of your business operations for years. However, your organization may struggle to maintain the current system and implement new projects. The thousands of customers we've worked with and surveyed state that expectations regarding the digital footprint and vision of the company are not aligned with the current IT environment.

  • SB HelpSystems ROBOT Generic IBM announced the E1080 servers using the latest Power10 processor in September 2021. The most powerful processor from IBM to date, Power10 is designed to handle the demands of doing business in today’s high-tech atmosphere, including running cloud applications, supporting big data, and managing AI workloads. But what does Power10 mean for your data center? In this recorded webinar, IBMers Dan Sundt and Dylan Boday join IBM Power Champion Tom Huntington for a discussion on why Power10 technology is the right strategic investment if you run IBM i, AIX, or Linux. In this action-packed hour, Tom will share trends from the IBM i and AIX user communities while Dan and Dylan dive into the tech specs for key hardware, including:

  • Magic MarkTRY the one package that solves all your document design and printing challenges on all your platforms. Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product. Make sure your data survives when catastrophe hits. Request your trial now!  Request Now.

  • SB HelpSystems ROBOT GenericForms of ransomware has been around for over 30 years, and with more and more organizations suffering attacks each year, it continues to endure. What has made ransomware such a durable threat and what is the best way to combat it? In order to prevent ransomware, organizations must first understand how it works.

  • SB HelpSystems ROBOT GenericIT security is a top priority for businesses around the world, but most IBM i pros don’t know where to begin—and most cybersecurity experts don’t know IBM i. In this session, Robin Tatam explores the business impact of lax IBM i security, the top vulnerabilities putting IBM i at risk, and the steps you can take to protect your organization. If you’re looking to avoid unexpected downtime or corrupted data, you don’t want to miss this session.

  • SB HelpSystems ROBOT GenericCan you trust all of your users all of the time? A typical end user receives 16 malicious emails each month, but only 17 percent of these phishing campaigns are reported to IT. Once an attack is underway, most organizations won’t discover the breach until six months later. A staggering amount of damage can occur in that time. Despite these risks, 93 percent of organizations are leaving their IBM i systems vulnerable to cybercrime. In this on-demand webinar, IBM i security experts Robin Tatam and Sandi Moore will reveal:

  • FORTRA Disaster protection is vital to every business. Yet, it often consists of patched together procedures that are prone to error. From automatic backups to data encryption to media management, Robot automates the routine (yet often complex) tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:

  • FORTRAManaging messages on your IBM i can be more than a full-time job if you have to do it manually. Messages need a response and resources must be monitored—often over multiple systems and across platforms. How can you be sure you won’t miss important system events? Automate your message center with the Robot Message Management Solution. Key features include:

  • FORTRAThe thought of printing, distributing, and storing iSeries reports manually may reduce you to tears. Paper and labor costs associated with report generation can spiral out of control. Mountains of paper threaten to swamp your files. Robot automates report bursting, distribution, bundling, and archiving, and offers secure, selective online report viewing. Manage your reports with the Robot Report Management Solution. Key features include:

  • FORTRAFor over 30 years, Robot has been a leader in systems management for IBM i. With batch job creation and scheduling at its core, the Robot Job Scheduling Solution reduces the opportunity for human error and helps you maintain service levels, automating even the biggest, most complex runbooks. Manage your job schedule with the Robot Job Scheduling Solution. Key features include:

  • LANSA Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.

  • LANSAWhen it comes to creating your business applications, there are hundreds of coding platforms and programming languages to choose from. These options range from very complex traditional programming languages to Low-Code platforms where sometimes no traditional coding experience is needed. Download our whitepaper, The Power of Writing Code in a Low-Code Solution, and:

  • LANSASupply Chain is becoming increasingly complex and unpredictable. From raw materials for manufacturing to food supply chains, the journey from source to production to delivery to consumers is marred with inefficiencies, manual processes, shortages, recalls, counterfeits, and scandals. In this webinar, we discuss how:

  • The MC Resource Centers bring you the widest selection of white papers, trial software, and on-demand webcasts for you to choose from. >> Review the list of White Papers, Trial Software or On-Demand Webcast at the MC Press Resource Center. >> Add the items to yru Cart and complet he checkout process and submit

  • Profound Logic Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application.

  • SB Profound WC 5536Join us for this hour-long webcast that will explore:

  • Fortra IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn: