JavaScript event.keyCode Evaluation (Firefox Safe!)

[Justin Beasley]

Here is an answer for those who are looking for a keystroke evaluation
script that works in Internet Explorer (IE 5.5, 6.0, 7.0 for PC--IE
4.0, 5.2 for Mac), Mozilla Firefox (Windows, Linux, and Apple
Macintosh), Safari, Opera, and other off-brand web browsers.

I have gone through many groups trying to find code that didn't break
in Firefox--yet still worked in other browsers. Although many people
give input on this topic, few are correct in their handling of the
events to give the correct results across the board.

I am a Webmaster, and although I have worked with much JavaScript, I do
not claim to be an expert on this topic--so feel free to post any
improvements that you can make.

Here's the test code, this snippet designed to force numeric-only input
in any browser, with the exception of a couple keys that are still
needed for form navigation (such as Tab--although this can be tailored
to your needs by adding more exceptions):

---SNIP_01---
<script language="JavaScript">
function CheckNumericKeyInfo($char, $mozChar) {
if($mozChar != null) { // Look for a Mozilla-compatible browser
if(($mozChar >= 48 && $mozChar <= 57) || $mozChar == 0 || $char ==
8 || $mozChar == 13) $RetVal = true;
else {
$RetVal = false;
alert('Please enter a numeric value.');
}
}
else { // Must be an IE-compatible Browser
if(($char >= 48 && $char <= 57) || $char == 13) $RetVal = true;
else {
$RetVal = false;
alert('Please enter a numeric value.');
}
}
return $RetVal;
}
</script>
---END_01---

This function would then be called as follows:

---SNIP_02---
<input type="text" name="over_figure" id="over_figure" size="5"
onKeyPress="return CheckNumericKeyInfo(event.keyCode, event.which);"
value="">
---END_02---

I have personally tested this on PC, Mac, and Linux systems in every
Web browser that I can get my hands on. It's far easier than the other
scripts that I've found, and you can just add "alert('keyCode: ' +
$char)" to find any other keycodes you might want to allow if you don't
know them off-hand. Obviously there is room to add a larger exception
list if you have need of it, and it might be better to just set $RetVal
to TRUE in the else and add an else if for IE, but my use didn't
require it.

I hope it saves someone some time!

 

[Mick White]

Justin Beasley wrote:

[snip]

---SNIP_01---
<script language="JavaScript">
function CheckNumericKeyInfo($char, $mozChar) {
if($mozChar != null) { // Look for a Mozilla-compatible browser
if(($mozChar >= 48 && $mozChar <= 57) || $mozChar == 0 || $char ==
8 || $mozChar == 13) $RetVal = true;
else {
$RetVal = false;
alert('Please enter a numeric value.');
}
}
else { // Must be an IE-compatible Browser
if(($char >= 48 && $char <= 57) || $char == 13) $RetVal = true;
else {
$RetVal = false;
alert('Please enter a numeric value.');
}
}
return $RetVal;
}
</script>
---END_01---

This function would then be called as follows:

---SNIP_02---
<input type="text" name="over_figure" id="over_figure" size="5"
onKeyPress="return CheckNumericKeyInfo(event.keyCode, event.which);"
value="">
---END_02---

[snip]

<input type="text" name="over_figure" id="over_figure" size="5"
onkeyup=
"if(!/^\d+$/.test(this.value)) alert('Please enter a numeric value.');">


Mick

 

[Justin Beasley]

Mick,

This seems to break in Safari . . . any ideas?

Justin Beasley wrote:

[snip]

---SNIP_01---
<script language="JavaScript">
function CheckNumericKeyInfo($char, $mozChar) {
if($mozChar != null) { // Look for a Mozilla-compatible browser
if(($mozChar >= 48 && $mozChar <= 57) || $mozChar == 0 || $char ==
8 || $mozChar == 13) $RetVal = true;
else {
$RetVal = false;
alert('Please enter a numeric value.');
}
}
else { // Must be an IE-compatible Browser
if(($char >= 48 && $char <= 57) || $char == 13) $RetVal = true;
else {
$RetVal = false;
alert('Please enter a numeric value.');
}
}
return $RetVal;
}
</script>
---END_01---

This function would then be called as follows:

---SNIP_02---
<input type="text" name="over_figure" id="over_figure" size="5"
onKeyPress="return CheckNumericKeyInfo(event.keyCode, event.which);"
value="">
---END_02---

[snip]

<input type="text" name="over_figure" id="over_figure" size="5"
onkeyup=
"if(!/^\d+$/.test(this.value)) alert('Please enter a numeric value.');">


Mick

 

[Justin Beasley]

Also, how do you check for Tab, Enter, Home, End, Shift, Ctrl, Alt,
Backspace, and Delete?

This would be helpful for my application.

 

[RobG]

Also, how do you check for Tab, Enter, Home, End, Shift, Ctrl, Alt,
Backspace, and Delete?

This would be helpful for my application.

Attempting to interpret key presses is always problematic. For example,
your code does not register any keypress for ctrl+x (cut) in IE but it
does in Firefox. Similarly for ctrl+v (paste), +c (copy) and +z (undo).

Mick's code simply tries to ensure that the input value is a number, it
doesn't attempt to interpret keystrokes at all. Since you are keen to
persist, below is a slimmed-down version, though I didn't test it very
thoroughly (IE 6 & Firefox 1.0.6).

Maybe it helps, maybe not.

Note that for script elements, the language attribute has been
depreciated, type is required:


<script type="text/javascript">

function CheckNumericKeyInfo( e )
{
e = e || window.event;
ch = e.which || e.keyCode;
if( ch != null) {
if( (ch >= 48 && ch <= 57)
|| ch == 0 || ch == 8
|| ch == 13 ) return true;
}
alert('Please enter a numeric value.');
return false;
}
</script>

<input type="text" size="5"
onKeyPress="return CheckNumericKeyInfo(event);">

 

[Gérard Talbot]

Justin Beasley a écrit :

Here is an answer for those who are looking for a keystroke evaluation
script that works in Internet Explorer (IE 5.5, 6.0, 7.0 for PC--IE
4.0, 5.2 for Mac), Mozilla Firefox (Windows, Linux, and Apple
Macintosh), Safari, Opera, and other off-brand web browsers.

I have gone through many groups trying to find code that didn't break
in Firefox--yet still worked in other browsers. Although many people
give input on this topic, few are correct in their handling of the
events to give the correct results across the board.

How about

KeyEventroperties
http://www.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/Samples/KeyEvent.htm

or

Key and Character Codes vs. Event Types
http://www.w3.org/2002/09/tests/keys.html

Gérard

 

[Mick White]

Mick,

This seems to break in Safari . . . any ideas?

Mick White wrote:

Try "onkeypress" or "onkeydown", but these events are not optimum for
the task at hand.
Mick