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. - function NumbersOnlyFilter(e){
-
var keynum;
-
if (window.event || e.keyCode) {
-
keynum = e.keyCode;
-
}else if (e.which) {
-
keynum = e.which;
-
}
-
-
if (keynum >= 48 && keynum <= 57) {
-
//characters 0-9
-
return true;
-
}
-
//returning true if it's the enter key, backspace key, or a movement key; otherwise false.
-
return IsMovementOrEnterKey(keynum);
-
}
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! -
function IsMovementOrEnterKey(keynum) {
-
if (keynum == 8 || keynum == 9 || keynum == 13 || keynum == 35 || keynum == 36 || keynum == 37 || keynum == 46 || keynum==39) {
-
//Backspace: 8
-
//Tab: 9
-
//Enter: 13
-
//End: 35 (also #)
-
//Home: 36 (also $)
-
//Delete: 46 (also .)
-
//Left Arrow: 37 (also %)
-
//Right Arrow: 39 (also ')
-
return true;
-
}
-
return false;
-
}
How can I tell if it's a movement key pressed, or if it's a character?
Thanks for your time,
-Frinny
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: -
<html>
-
<body>
-
<script type="text/javascript">
-
function NumbersOnlyFilter(e)
-
{
-
var keynum = ASCIIKeyPressValue(e);
-
-
if (keynum >= 48 && keynum <= 57) {
-
//characters 0-9
-
return true;
-
}
-
//returning true if it's the enter key or a movement key; otherwise false.
-
return IsMovementOrEnterKey(keynum);
-
}
-
-
function ASCIIKeyPressValue(e) {
-
var keynum;
-
if (e.charCode != null) {
-
keynum = e.charCode;
-
} else if (e.keyCode != null) {
-
keynum = e.keyCode;
-
} else if (e.which != null) {
-
keynum = e.which;
-
}
-
return keynum;
-
}
-
-
function IsMovementOrEnterKey(keynum) {
-
if (keynum == 0 || keynum == 8 || keynum == 9 || keynum == 13) {
-
//Backspace: 8
-
//Tab: 9
-
//Enter: 13
-
return true;
-
}
-
return false;
-
}
-
</script>
-
-
<input type="text" onkeypress="return NumbersOnlyFilter(event);" />
-
-
</body>
-
</html>
5  5845 
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: -
<html>
-
<body>
-
<script type="text/javascript">
-
function NumbersOnlyFilter(e)
-
{
-
var keynum = ASCIIKeyPressValue(e);
-
-
if (keynum >= 48 && keynum <= 57) {
-
//characters 0-9
-
return true;
-
}
-
//returning true if it's the enter key or a movement key; otherwise false.
-
return IsMovementOrEnterKey(keynum);
-
}
-
-
function ASCIIKeyPressValue(e) {
-
var keynum;
-
if (e.charCode != null) {
-
keynum = e.charCode;
-
} else if (e.keyCode != null) {
-
keynum = e.keyCode;
-
} else if (e.which != null) {
-
keynum = e.which;
-
}
-
return keynum;
-
}
-
-
function IsMovementOrEnterKey(keynum) {
-
if (keynum == 0 || keynum == 8 || keynum == 9 || keynum == 13) {
-
//Backspace: 8
-
//Tab: 9
-
//Enter: 13
-
return true;
-
}
-
return false;
-
}
-
</script>
-
-
<input type="text" onkeypress="return NumbersOnlyFilter(event);" />
-
-
</body>
-
</html>
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"
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
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
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
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Perttu Pulkkinen |
last post by:
I have different functions that receive window.event as parameter. Functions
are used like this:
<input type="text" id="x"
onkeypress="return onKeyCurrencyCheck(ev, 'x')"
onblur...
|
by: rich_poppleton |
last post by:
Help....
I've got a textarea where people type in a description. However for
certain reasons we need to stop them typing !$*^ .
I have a solution this which works fine in IE:
function...
|
by: Thomas Christensen |
last post by:
I'm trying to figure out what key the user pressed using a Danish
keyboard layout. charCodeAt returns the correct number, but
event.keyCode returns a wrong number, when using one of the keys that...
|
by: tshad |
last post by:
Can you do a search for more that one string in another string?
Something like:
someString.IndexOf("something1","something2","something3",0)
or would you have to do something like:
if...
|
by: WilliamRLinden |
last post by:
Hi world! we are pretty new to JavaScript and have been
struggling for now 2 days on this problem ... We would
appreciate mercy if anyone can give us some.
Basically we are trying to simulate...
|
by: jayscott1 |
last post by:
What I would like to do is have the user start typing in the last name
and as they were typing it would retrieve names from the database and
give a drop down like autosuggest in google. That much...
|
by: Paul Gorodyansky |
last post by:
Hi,
I have function that works via onkeypressed -
for example, what to catch when a user presses a punctuation symbol
such as '.'
So I check keyCode for that - works just fine in
Opera 8,...
|
by: Peter Anthony |
last post by:
This is a perfect example of how some information slips through the crack in
MSDN2. There is NO explanation of what KeyValue is in MSDN2!! Sure, it has a
page on it, here it is:
...
|
by: didi86 |
last post by:
Please help me to adding multiple row at a time...
// Last updated 2006-02-21
<script language="javascript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| |
