Javascript Force Numeric Input

Announcements

	Try Azure, win a laptop
	Build a VS2010 addin win a Zune
	Monthly Competition

Articles

Platforms, Frameworks & Libraries

Languages

General Programming

Graphics / Design

Development Lifecycle

Services

CodeProject VS2008 Addin

Feature Zones

Product Showcase

WhitePapers / Webcasts

.NET Dev Library

Cloud Hosting Resources

ASP.NET Web Hosting

Advanced Search
Add to IE Search

Discuss

Report

5 votes for this article.

Popularity: 2.62 Rating: 3.75 out of 5

Download source - 728 B

Introduction

While writing the CodeProject article Multi-lingual Light Weight Report Writer with DrillDown, I needed to create a textbox which would only accept numbers.
I looked around the net and couldn't find what I wanted, so I wrote one.

Using the Code

Unzip the download into your project.

Include the following in the <head> section of your *.aspx file.

<script src="JavascriptForceNumericInput.js"></script>

The function signature is:

ForceNumericInput(This, AllowDot, AllowMinus)

To allow positive and negative numbers with decimal point, code your input statement as:

<input type="text" name="YourFieldName" id="YourFieldName" value="" 
	onkeydown="ForceNumericInput(this, true, true)" />

To allow positive and negative integers, code your input statement as:

<input type="text" name="YourFieldName" id="YourFieldName" 
	value="" onkeydown="ForceNumericInput(this, false, true)" />

To allow only positive numbers with decimal point, code your input statement as:

<input type="text" name="YourFieldName" id="YourFieldName" 
	value="" onkeydown="ForceNumericInput(this, true, false)" />

To allow only positive integers, code your input statement as:

<input type="text" name="YourFieldName" id="YourFieldName" 
	value="" onkeydown="ForceNumericInput(this, false, false)" />

You must include an id attribute or the code will not work. You do not need a name attribute unless this is a form variable which will be submitted.

Points of Interest

This function was written using the Internet Explorer event model as the Light Weight Report Writer targeted ASPX applications and most of those are written for the Internet Explorer browser.
If anyone converts the code to a cross browser environment, please let me know and I'll repost the source and give credit to the author.

History

28^th September, 2008: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Gary Dryden

Member

Occupation:	Software Developer (Senior)
Location:	Canada

Other popular Client side scripting articles:

Handy XP Style Menu
This is a pretty menu in XP style. Easy to setup, highly customizable.
JavaScript For Beginners
A very easy tutorial for JavaScript beginners
Auto-complete Control
Auto-complete control.
JavaScript Virtual Keyboard
This article presents a Virtual Keyboard - an important addendum to the library of usability tools.
Observer Design Pattern Using JavaScript
Ensuring a crisp boundary exists between objects, enabling greater reuse and system maintainability.

Article Top

You must Sign In to use this message board.

FAQ
Noise Tolerance Layout Per page

Cross-browser support

SirArthur

16:01 29 Jan '10

Only IE supports explicit event calls, so you need to change your code in order to support another browsers. This is how:

1) Add an argument to the function and call it e for hold the event.

Change this:

function ForceNumericInput(This, AllowDot, AllowMinus)

to this:

function ForceNumericInput(This, AllowDot, AllowMinus,e)

2) On the code var change from:

var code = event.keyCode;

To:

        if(window.event){
            var code = event.keyCode;
        }else{
            var code = e.keyCode;
        }

3) Before any line where event will return true change from:

event.returnValue=true;

to

if(window.event) event.returnValue=true;

(you don't need to return anything on implicit browsers for it to be true)

4) Change the lines where the event returns false from:

event.returnValue=false;

to

                if(window.event){
                    event.returnValue=false;
                }else{
                    StopEvent(e);
                }

5) Change this line:

var s = "ForceNumericInput(document.getElementById('"+This.id+"'))";

To this:

var s = "ForceNumericInput(document.getElementById('"+This.id+"'),"+AllowMinus+","+AllowDot+","+e+")";

6) Add this function to your scripts in order to stop the events:

    function StopEvent(pE)
{
   if (!pE)
     if (window.event)
    pE = window.event;
     else
    return;
   if (pE.cancelBubble != null)
      pE.cancelBubble = true;
   if (pE.stopPropagation)
      pE.stopPropagation();
   if (pE.preventDefault)
      pE.preventDefault();
   if (window.event)
      pE.returnValue = false;
   if (pE.cancel != null)
      pE.cancel = true;
}  // StopEvent

7) on the onKeyDown events from the inputs you want to be numeric only, add an event call as last argument:

i.e Change this:

onkeydown="ForceNumericInput(this,false,false)"

To this:

onkeydown="ForceNumericInput(this,false,false,event)"

That's it, your script is now able to stop all non-numeric input on all browsers.

Shift+Number Key

umay

2:08 14 Apr '09

Hi... the script is good at all ... except if i use the shift+1 key it is displaying "!" in the number text box.. what should do for this... otherwise its working.... Kindly help me to solve in this....
Sign In·View Thread·PermaLink

used somehow

ykorotia

10:55 24 Nov '08

o.k.
Sign In·View Thread·PermaLink

Fix To Include numberpad

Member 4355670

11:20 11 Nov '08

To modify this to include the numberpad - modify the following if(code >= 48 && code <= 57) To if((code >= 48 && code <= 57)\|\|(code >= 97 && code <= 105))
Sign In·View Thread·PermaLink	4.00/5 (3 votes)

Re: Fix To Include numberpad

dr_em

21:58 5 May '09

Should change into if((code >= 48 && code <= 57)\|\|(code >= 96 && code <= 105)) Best Regards, M.Arif
Sign In·View Thread·PermaLink

Cross-browser support

paul.m.wilkins

14:46 5 Oct '08

There are a couple of issues that have to be addressed for cross-browser support.

You can pass the event from html by using the event keyword in all browsers. It's not the prferred way to do it, but is might be more compatible with your intended user base.

The keydown events are the biggest problem. Keys like the fullstop have different codes across different browsers. The Javascript Madness: Keyboard Events[^] article does a good job of explaining the problem.

The solution is to set the event on keypress instead. When you do that the navigation keycodes won't be required anymore, and you can use String.fromCharCode(event.keyCode) to retrieve the key that was pressed as a normal string character.

I've posted an article in reply[^] to yours in the JavaScript forum at SitePoint[^] and look forward to furthering cross-browser support with you.

--
Paul Wilkins

General News Question Answer Joke Rant Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads.

PermaLink | Privacy | Terms of Use
Last Updated: 4 Oct 2008
Editor: Deeksha Shenoy