469,337 Members | 6,757 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > multiple meanings for keycode or which value

Post your question to a community of 469,337 developers. It's quick & easy.

Multiple meanings for keyCode or which value

Frinavale
9,735 Expert Mod 8TB
I have a some text inputs that expect numbers as input. I have written a function that returns false if any key other than one that represents a number is pressed. I call the function during the onkeypress event and this prevents the user from entering anything that is not a number.

Expand|Select|Wrap|Line Numbers
  1. function NumbersOnlyFilter(e){
  2.     var keynum;
  3.     if (window.event || e.keyCode) {
  4.         keynum = e.keyCode;
  5.     }else if (e.which) {
  6.         keynum = e.which;
  7.     }
  8.  
  9.     if (keynum >= 48 && keynum <= 57) {  
  10.         //characters 0-9
  11.         return true;
  12.    }
  13.    //returning true if it's the enter key, backspace key, or a movement key; otherwise false.
  14.    return IsMovementOrEnterKey(keynum);
  15. }
In order to let the user move within the text input field I have also allowed the user to press backspace, enter, left, right, up, down, tab, home and end. The problem is that the keyCode/which value for these sometimes match characters as well!

Expand|Select|Wrap|Line Numbers
  1. function IsMovementOrEnterKey(keynum) {
  2.     if (keynum == 8 || keynum == 9 || keynum == 13 || keynum == 35 || keynum == 36 || keynum == 37 || keynum == 46 || keynum==39) {
  3.         //Backspace: 8
  4.         //Tab: 9
  5.         //Enter: 13
  6.         //End: 35  (also #)
  7.         //Home: 36 (also $)
  8.         //Delete: 46 (also .)
  9.         //Left Arrow: 37 (also %)
  10.         //Right Arrow: 39 (also ')
  11.         return true;
  12.     }
  13.     return false;
  14. }
How can I tell if it's a movement key pressed, or if it's a character?

Thanks for your time,

-Frinny
Apr 7 '09 #1

✓ answered by Frinavale

After reading this article I think I've found the answer to my question.

The charCode value returns the ASCII of the key pressed; whereas the keyCode property returns the keyboard value for the key pressed. If the key doesn't have an ASCII value then the charCode property returns 0. The charCode property is only available during the onkeypress event.

The only thing is that IE and Opera don't support charCode (it's undefined). I this case I'll have to use the keyCode property. Apparently (when testing this in IE) the onkeypress event isn't fired when special keys (keys with no ASCII value) are pressed.

For example:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <body>
  3.     <script type="text/javascript">
  4.       function NumbersOnlyFilter(e)
  5.       {
  6.         var keynum = ASCIIKeyPressValue(e);
  7.  
  8.         if (keynum >= 48 && keynum <= 57) {  
  9.             //characters 0-9
  10.             return true;
  11.        }
  12.        //returning true if it's the enter key or a movement key; otherwise false.
  13.        return IsMovementOrEnterKey(keynum);
  14.       }
  15.  
  16.       function ASCIIKeyPressValue(e) {
  17.         var keynum;
  18.         if (e.charCode != null) {
  19.             keynum = e.charCode;
  20.         } else if (e.keyCode != null) {
  21.             keynum = e.keyCode;
  22.         } else if (e.which != null) {
  23.             keynum = e.which;
  24.         }
  25.         return keynum;
  26.       }
  27.  
  28.       function IsMovementOrEnterKey(keynum) {
  29.         if (keynum == 0 || keynum == 8 || keynum == 9 || keynum == 13) {
  30.             //Backspace: 8
  31.             //Tab: 9
  32.             //Enter: 13
  33.             return true;
  34.         }
  35.         return false;
  36.       }
  37.     </script>
  38.  
  39.     <input type="text" onkeypress="return NumbersOnlyFilter(event);" />
  40.  
  41.   </body>
  42. </html>

5 5544
Frinavale
9,735 Expert Mod 8TB
After reading this article I think I've found the answer to my question.

The charCode value returns the ASCII of the key pressed; whereas the keyCode property returns the keyboard value for the key pressed. If the key doesn't have an ASCII value then the charCode property returns 0. The charCode property is only available during the onkeypress event.

The only thing is that IE and Opera don't support charCode (it's undefined). I this case I'll have to use the keyCode property. Apparently (when testing this in IE) the onkeypress event isn't fired when special keys (keys with no ASCII value) are pressed.

For example:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.   <body>
  3.     <script type="text/javascript">
  4.       function NumbersOnlyFilter(e)
  5.       {
  6.         var keynum = ASCIIKeyPressValue(e);
  7.  
  8.         if (keynum >= 48 && keynum <= 57) {  
  9.             //characters 0-9
  10.             return true;
  11.        }
  12.        //returning true if it's the enter key or a movement key; otherwise false.
  13.        return IsMovementOrEnterKey(keynum);
  14.       }
  15.  
  16.       function ASCIIKeyPressValue(e) {
  17.         var keynum;
  18.         if (e.charCode != null) {
  19.             keynum = e.charCode;
  20.         } else if (e.keyCode != null) {
  21.             keynum = e.keyCode;
  22.         } else if (e.which != null) {
  23.             keynum = e.which;
  24.         }
  25.         return keynum;
  26.       }
  27.  
  28.       function IsMovementOrEnterKey(keynum) {
  29.         if (keynum == 0 || keynum == 8 || keynum == 9 || keynum == 13) {
  30.             //Backspace: 8
  31.             //Tab: 9
  32.             //Enter: 13
  33.             return true;
  34.         }
  35.         return false;
  36.       }
  37.     </script>
  38.  
  39.     <input type="text" onkeypress="return NumbersOnlyFilter(event);" />
  40.  
  41.   </body>
  42. </html>
Apr 7 '09 #2
dmjpro
2,476 2GB
As no standard key event handling supported then why not you using regular expression to check whether an unexpected key pressed or not.
I think you get the text field value on "KeyPress" event then check whether it's valid, if not then replace the unexpected character with "empty string"
Apr 8 '09 #3
Frinavale
9,735 Expert Mod 8TB
Even though I love using Regular Expressions, when you handle the onkeydown, onkeyup, or onkeypress you do not have a string to deal with. You have the value of the key that was pressed (which is a number). At this time, the value has not been entered into the text box, it's simply a number (this is how I'm preventing the value from being entered into the text box). So, Regular Expressions can't help me here.

I solved the problem by handling the "onkeypress" event instead of the "onkeydown" event that I was using originally. During the "onkeypress" event, in some browsers, the "charCode" value is available through the event Object. This value represents the ASCII value of the key that was pressed.

The "keyCode" (that I was using originally) represents the actual button that was pressed (not the ASCII value of it). So, when I used this value special buttons (like the Home key) matched the ASCII values. It was impossible to tell which key was actually being pressed.

The "charCode" value is 0 if a special key is pressed.
And apparently, special keys don't raise the "onkeypress" event in the browsers that don't support "charCode"...so for these cases I use the "keyCode" value instead.

See the example I posted earlier.

:)

-Frinny
Apr 8 '09 #4
Frinavale
9,735 Expert Mod 8TB
Apparently I'm still experiencing problems with this.

Now, however, it's the number pad that is giving me problems.

In Internet Explorer, if numlock is on, then the number-pad returns values ranging from ASCII 96 (representing the number 0) to ASCII 105 (representing the number 9). However, this range also represents represents "a" to "i" and the "`" character.

I can't seem to find a way to check if numlock is on...

Does anyone have any advise on how to get around this issue?

Thanks,

-Frinny
Sep 20 '10 #5
Frinavale
9,735 Expert Mod 8TB
Ok, never mind, apparently I was making the same mistake as before (using onkeydown instead of onkeypress) I just didn't notice it when I posted this question because I had both events calling the method.

*blush*

-Frinny
Sep 20 '10 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics
Firefox/Mozilla and window.event.keyCode
1 post views Thread by Perttu Pulkkinen | last post: by
Firefox event.keyCode problem (help......)
6 posts views Thread by rich_poppleton | last post: by
IE event and keyCode/charCode
4 posts views Thread by Thomas Christensen | last post: by
Search for multiple things in a string
32 posts views Thread by tshad | last post: by
type ahead and autofill multiple fields
4 posts views Thread by jayscott1 | last post: by
Any work-around? Opera 9 and keyCode
3 posts views Thread by Paul Gorodyansky | last post: by
What is KeyValue (in contrast to KeyCode)?
1 post views Thread by Peter Anthony | last post: by
Adding multiple rows..
3 posts views Thread by didi86 | last post: by
What is JavaScript?
1 post views Thread by CARIGAR | last post: by
Payroll Program
reply views Thread by Marylou17 | last post: by
Payroll Program
1 post views Thread by Marylou17 | last post: by
Payroll Program
1 post views Thread by Marylou17 | last post: by
BYTES.COM © 2021
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.