Midrange Programmer

The green screen has been around for a long time. There's good reason for that: It works. Other interfaces have gone by the wayside, like the multifunction card unit and the teletype (although have you noticed that every "high tech" movie that shows characters being typed on a green screen still does a teletype noise in the background?). But the green screen is a mainstay in many shops around the world, because it's simple, cheap, and reliable.

But there's another reason the green screen is still around: The green screen is actually pretty powerful. If you think about it, the green screen--be it a clunky old 5250 model 12, a sleek Lynk "amber screen" terminal, or even a good 5250 emulation package--actually does a significant amount of work interacting with the user--work that isn't done in the HTML world.

For example, consider an alpha entry field. Unless you specifically code CHECK(LC) on the display file DDS, when users type a lowercase "a," they see an uppercase "A" in the field. They don't need to hold down the Shift key, either; they simply type as fast as they can. Speed, speed, speed is the 5250 mantra.

Convert that same field to an HTML text input field. Unless users hold down the Shift key or hit Caps Lock, they're going to type lowercase text into the field. And they're going to see lowercase input in the field. There's no simple way around it--at least not without doing some extreme programming in the browser itself. And it's exactly that sort of programming that I'll show you in this article.

Let's take a look at what would be required to create an uppercase-only field in HTML; that is, a field that converts lowercase keystrokes to uppercase input transparently to the user as the characters are typed. It requires two basic pieces: a filter that changes lowercase letters to uppercase and some way to attach the filter to the field.

This can all be done using simple JavaScript in conjunction with a rather powerful but little known feature of Internet Explorer known as the Document Object Model. The DOM is also available to some degree in Netscape, but in this writer's opinion, the Netscape implementation is not designed for programmer interaction. I'll show you exactly what I mean in just a moment.

First, the filter. You can create JavaScript functions anywhere in your HTML, but typically you would do it near the beginning. I actually like to stick them in between the HEAD section and the BODY section, but that's me. To create the function, enter the following code:

This function queries the keystroke from the current keystroke event, and if it's anything from a lowercase "a" (0x61) to lowercase "z" (0x7A), it converts the key to uppercase. This is where Netscape, Mozilla, and Internet Explorer diverge and Internet Explorer proves itself superior. In Internet Explorer, I replace the value stored in window.event.keyCode with a different value, and that will change which key the user hit. Subtracting 0x20 will convert lowercase alphabetic letters to uppercase. This algorithm is by no means perfect--it doesn't handle non-English characters, for example--but it's perfectly acceptable for our purpose and is easy enough to expand. Unfortunately, in Netscape, the keyCode attribute is read-only, which makes it nearly impossible to write a comparable function.

Now all you need to do is attach this function to an input field. There are two basic ways to do that: on the HTML tag for the field and dynamically via JavaScript. I'll show you both ways in the following paragraphs.

If you know ahead of time which fields are going to have which types of editing, it's easy to attach the filter just by modifying the tag. For example, the following line shows two input fields, one with a tag and one without:

It's quite easy to attach the filter; you simply add an onEvent attribute. The attribute is a single JavaScript statement that invokes the uppercase filter function. The trickiest part is determining which event to filter. There are three events associated with key events: onKeyup, onKeydown, and onKeypress. Each is called at a different point in the user interaction, and each is used for slightly different purposes. Personally, I rarely use onKeyup, but I often use onKeypress and occasionally onKeyDown. I use onKeypress when I'm dealing with actual displayable characters, such as numeric filtering and, as in this case, lowercase-to-uppercase translation. I primarily use onKeyDown for trapping function keys, a technique for another day.

If you're interested in learning more about these events, one way to find out about them is to use Microsoft's online guide. MSDN Online has a wealth of great information about the DOM, and while there's a lot to wade through, if you need information, this is the definitive source. For example, take a look at the reference for the text input element.

A more dynamic approach is to attach the function to the tag using a JavaScript statement. This can be done in the browser, and can be done dynamically, even in response to another event. While it's outside the scope of this article to present a fully dynamic example, I can show you a simple JavaScript example that will illustrate the point.

I created a new field. You'll notice that I added an id attribute to the field and assigned it the id dynafield. This is then used in the following JavaScript statement to attach the function uppercase to the onkeypress event. This code may seem a little odd at first, because it treats the function uppercase as if it were simply another piece of data. But that's something that a fully interpreted language like JavaScript is very good at: treating even code as data.

And it also shows the power of DHTML. You could theoretically change the filter on a field based on an external event, like a button press, and in one of the presentations I do at technical conferences, I have an example that does just that.

Why is this technique important to you and your applications? It allows you to create a simple HTML page, but dynamically change its behavior based on changing conditions. Can you think of any parallels? How about using an indicator to determine whether a field is lowercase-capable? The same sorts of things can be done with DHTML. You can also chain multiple events together, setting up a field that will support only numeric entry and then, upon the field being filled, automatically press the Enter key. In DDS this is as simple as using a keyboard shift of Y and adding a CHECK(RA) keyword to the field. In pure HTML it's impossible, but with a few carefully crafted JavaScript functions and a few lines of JavaScript, you can do any of these things and more.

I have included an HTML file for download that contains not only the concepts I've shown you in this article but also a digits-only filter and a set of radio buttons that dynamically change the filtering characteristics of the field dynafield. If you think this sort of information is useful, please drop me a line, and let the folks at Guild Companies know as well. Thanks for reading!

Joe Pluta is the owner of Pluta Brothers Design and author of the book Eclipse: Step by Step, the first tutorial guide to building business applications using IBM's new Eclipse platform. E-mail: joepluta@plutabrothers.com