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! 6 18266
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
Mick,
This seems to break in Safari . . . any ideas?
Mick White wrote: 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
Also, how do you check for Tab, Enter, Home, End, Shift, Ctrl, Alt,
Backspace, and Delete?
This would be helpful for my application.
Justin Beasley wrote: 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);">
--
Rob
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
KeyEvent:Properties http://www.din.or.jp/~hagi3/JavaScri...s/KeyEvent.htm
or
Key and Character Codes vs. Event Types http://www.w3.org/2002/09/tests/keys.html
Gérard
--
remove blah to email me
Justin Beasley wrote: Mick,
This seems to break in Safari . . . any ideas?
Mick White wrote: <input type="text" name="over_figure" id="over_figure" size="5" onkeyup= "if(!/^\d+$/.test(this.value)) alert('Please enter a numeric value.');">
Try "onkeypress" or "onkeydown", but these events are not optimum for
the task at hand.
Mick This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Julia Briggs |
last post by:
Are there any gotchas using if (event.keyCode==8)? I understand that
to represent backspace, but it doesn't work. I am running Windows XP,
using a typical keyboard - but no luck in detecting...
|
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: Nathan Sokalski |
last post by:
I add a JavaScript event handler to some of my Webcontrols using the
Attributes.Add() method as follows:
Dim jscode as String = "return (event.keyCode>=65&&event.keyCode<=90);"...
|
by: Nathan Sokalski |
last post by:
I am writing a piece of code for an ASP.NET function that generates an
onKeyPress JavaScript eventhandler that uses the event.keyCode / event.which
properties. I have two situations that I would...
|
by: acl123 |
last post by:
Hi,
I am trying to work out how to access the event object in firefox
under two conditions -
1) Attaching event handlers in javascript, not html.
2) The event handler requires parameters in...
|
by: samxx |
last post by:
Hi,
I need to capture Enter key (keyCode==13) in an designMode enabled iframe of my chat sending virtual textbox. it's a wysiwyg posting. However I have the following code working fine in IE7 but...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
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: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
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: 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...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |