Javascript Force Numeric Input

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

Software Developer (Senior)

Canada

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

My vote of 1

metafr

1:16 19 Mar '10

Non cross browser, Doesn't work with the numeric pad!
Sign In·View Thread·Permalink

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.25/5 (4 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