…use these to jump around or read it all
[The Script]
[The Netscape Portion]
[The MSIE Portion]
[Altering The Script]
[What About The Numbers?]
Here’s a great trick that I stumbled across while surfing for a completely different topic. One of the things you’re looking for when creating a Web site is interaction. You want your Web pages to play with the people reading and typing to them.
To that end, now and again you may want to know when someone presses a specific key. The first example that pops to mind is any kind of game you may want to create. Using this JavaScript you can set up the board so that certain keyboard strokes do certain things. You may also want to set this up with a form. Let’s say you have a form element that cannot contain the tilde character. With this script, you can set it up so that when the user presses tilde, bang. An alert pops up and warns against it.
The example I ran into simply denoted if numbers were pushed. When I began to really play with the script, it occurred to me that even though all ASCII characters are equal in terms of a numeric element, they are not equal on the keyboard.
The script had to deal with both keys stroked while in lower case and keys stroked while in upper case. Furthermore, and you could probably see this coming, there was no one script that worked in both Netscape and Internet Explorer.
No kidding, huh?
Well, after cursing and yelling a good bit, this is what I came up with. To see the script in action, click here and follow the instructions.
The Script
It looks like this:
<HEAD>
<SCRIPT LANGUAGE=”JavaScript1.2″>
<!–
function NNKeyCap(thisOne)
{
if (thisOne.modifiers & Event.SHIFT_MASK)
{
if (thisOne.which == 37)
{alert(‘That’s the % key’)};
if (thisOne.which == 90)
{alert(‘That’s the Z key’)};
if (thisOne.which == 41)
{alert(‘That’s the ) key’)};
}
if (thisOne.which == 61)
{alert(‘That’s the = key’)};
if (thisOne.which == 106)
{alert(‘That’s the j key’)};
if (thisOne.which == 51)
{alert(‘That’s the 3 key’)};
}
function IEKeyCap()
{
if (window.event.shiftKey)
{
if (window.event.keyCode == 37)
{alert(‘That’s the % key’)};
if (window.event.keyCode == 90)
{alert(‘That’s the Z key’)};
if (window.event.keyCode == 41)
{alert(‘That’s the ) key’)};
}
if (window.event.keyCode == 61)
{alert(‘That’s the = key’)};
if (window.event.keyCode == 106)
{alert(‘That’s the j key’)};
if (window.event.keyCode == 51)
{alert(‘That’s the 3 key’)};
}
if (navigator.appName == ‘Netscape’) {
window.captureEvents(Event.KEYPRESS);
window.onKeyPress = NNKeyCap;
}
//–>
</SCRIPT>
</HEAD>
<BODY onKeyPress=”IEKeyCap()”>
The Netscape Portion
I’ve attempted to label the elements of the script well enough so that you can more easily pick out what each part does.
We’ll start with the top third of the script first. It deals with Netscape browsers.
function NNKeyCap(thisOne)
{
if (thisOne.modifiers & Event.SHIFT_MASK)
{
if (thisOne.which == 37)
{alert(‘That’s the % key’)};
if (thisOne.which == 90)
{alert(‘That’s the Z key’)};
if (thisOne.which == 41)
{alert(‘That’s the ) key’)};
}
if (thisOne.which == 61)
{alert(‘That’s the = key’)};
if (thisOne.which == 106)
{alert(‘That’s the j key’)};
if (thisOne.which == 51)
{alert(‘That’s the 3 key’)};
}
It’s a fairly straight forward function named “NNKeyCap()”. The top part asks if the shift key is held down. That’s this line:
if (thisOne.modifiers & Event.SHIFT_MASK)
If it is held down, these six lines come into play:
{
if (thisOne.which == 37)
{alert(‘That’s the % key’)};
if (thisOne.which == 90)
{alert(‘That’s the Z key’)};
if (thisOne.which == 41)
{alert(‘That’s the ) key’)};
}
Notice that the function will be passed a number upon the keystroke. That number is set in these three lines. 37 represents the % character, 90 represents the “Z” character, and 41 represents the ) character. All of these characters are created by holding down the shift key.
Each of the if statements then have what should happen within the curly brackets. In this case I have a simple alert command. If you wish to use this script and have something more amazing, you would put the code inside the curly brackets following each keystroke identifier.
But what if the shift key is not pressed?
The script is set up so that if the shift key is not pressed, the next set of conditions come into play:
if (thisOne.which == 61)
{alert(‘That’s the = key’)};
if (thisOne.which == 106)
{alert(‘That’s the j key’)};
if (thisOne.which == 51)
{alert(‘That’s the 3 key’)};
}
The format is exactly the same except the numbers and letters have been changed. Each of the three keys noted here do not require that the shift key be pressed.
WAIT!
How do you know what number represents what key? I’ll get to that. Stay tuned. Back to the script…
The function “NNKeyCap()” is fired using this little blip of code at the end of the script.
if (navigator.appName == ‘Netscape’) {
window.captureEvents(Event.KEYPRESS);
window.onKeyPress = NNKeyCap;
I stuck it at the end because of the way the script works. Basically the NNKeyCap() function is loaded into RAM before any of the keys can be stroked so it will work straight away. It seems a little backwards, but that’s the reasoning.
The MSIE Portion
The MSIE portion of the script works almost exactly the same way. Some of the names have been changed because of a difference in jargon plus the function is now triggered in the BODY tag. Look at the full script again. You’ll see the onKeyPress in the BODY tag. It’s important that you have that.
The IE portion looks like this:
function IEKeyCap()
{
if (window.event.shiftKey)
{
if (window.event.keyCode == 37)
{alert(‘That’s the % key’)};
if (window.event.keyCode == 90)
{alert(‘That’s the Z key’)};
if (window.event.keyCode == 41)
{alert(‘That’s the ) key’)};
}
if (window.event.keyCode == 61)
{alert(‘That’s the = key’)};
if (window.event.keyCode == 106)
{alert(‘That’s the j key’)};
if (window.event.keyCode == 51)
{alert(‘That’s the 3 key’)};
}
That should look rather familiar. The first section checks to see if the shift key is pressed and if it is, these specific numbers are “listened” for. If the shift key is not pressed, the next little blip of code comes into play.
Altering The Script
The script is written so that altering it is very easy without disrupting the remainder of the text.
To pick a new character for the script to react to, you simply enter the new number in the correct place…in both sections. I mean, you want this to work on both browsers right?
I have placed the alerts inside curly brackets. The text I have in there is very small, but as any JavaScript programmer knows, you can spread those brackets very wide apart and put just about any event or script in there.
The script is quite malleable on purpose.
What About The Numbers?
The numbers are the ACSII numbers that represent the character. There are 128 in all. Here’s a link
to a full list.
What I have below are the numbers you will be most interested in. These are the keys on your
computer keyboard.
Just change out the number shown below with the number in the script and that key becomes
active in the script.
I’ll leave it at that –
| 09 = Tab | 11 = Home | 13 = Enter |
| 32 = Space Bar | 33 = ! | 34 = ” |
| 35 = # | 36 = $ | 37 = % |
| 38 = & | 39 = ‘ | 40 = ( |
| 41 = ) | 42 = * | 43 = + |
| 44 = , | 45 = – | 46 = . |
| 47 = / | 48 = 0 | 49 = 1 |
| 50 = 2 | 51 = 3 | 52 = 4 |
| 53 = 5 | 54 = 6 | 55 = 7 |
| 56 = 8 | 57 = 9 | 58 = : |
| 59 = ; | 60 = < | 61 = = |
| 62 = > | 63 = ? | 64 = @ |
| 65 = A | 66 = B | 67 = C |
| 68 = D | 69 = E | 70 = F |
| 71 = G | 72 = H | 73 = I |
| 74 = J | 75 = K | 76 = L |
| 77 = M | 78 = N | 79 = O |
| 80 = P | 81 = Q | 82 = R |
| 83 = S | 84 = T | 85 = U |
| 86 = V | 87 = W | 88 = X |
| 89 = Y | 90 = Z | 91 = [ |
| 92 = | 93 = ] | 94 = ^ |
| 95 = – | 96 = ` | 97 = a |
| 98 = b | 99 = c | 100 = d |
| 101 = e | 102 = f | 103 = g |
| 104 = h | 105 = i | 106 = j |
| 107 = k | 108 = l | 109 = m |
| 110 = n | 111 = o | 112 = p |
| 113 = q | 114 = r | 115 = s |
| 116 = t | 117 = u | 118 = v |
| 119 = w | 120 = x | 121 = y |
| 122 = z | 123 = { | 124 = | |
| 125 = } | 126 = ~ |
Enjoy!
[The Script]
[The Netscape Portion]
[The MSIE Portion]
[Altering The Script]
[What About The Numbers?]
