Click here to Skip to main content
15,886,919 members
Search within:


Articles / Programming Languages / C#
 
Article

Javascript Force Numeric Input

Rate me:
Please Sign up or sign in to vote.
3.36/5 (8 votes)
4 Oct 2008CPOL1 min read 50.3K   620   15   9
A JavaScript function which rejects non-numeric key strokes

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.

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

The function signature is:

JavaScript
ForceNumericInput(This, AllowDot, AllowMinus)

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

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

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

JavaScript
<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:

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

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

JavaScript
<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

  • 28th September, 2008: Initial version

License

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


Written By
Gary Dryden
Software Developer (Senior)
Canada Canada
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
First Prev Next
QuestionThank you! Pin
Member 1113918422-Jun-15 4:41
Member 1113918422-Jun-15 4:41 
GeneralMy vote of 1 Pin
metafr19-Mar-10 0:16
metafr19-Mar-10 0:16 
GeneralCross-browser support Pin
SirArthur29-Jan-10 15:01
SirArthur29-Jan-10 15:01 
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){<br />
    var code = event.keyCode;<br />
}else{<br />
    var code = e.keyCode;<br />
}


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){<br />
    event.returnValue=false;<br />
}else{<br />
    StopEvent(e);<br />
}


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)<br />
{<br />
   if (!pE)<br />
     if (window.event)<br />
    pE = window.event;<br />
     else<br />
    return;<br />
   if (pE.cancelBubble != null)<br />
      pE.cancelBubble = true;<br />
   if (pE.stopPropagation)<br />
      pE.stopPropagation();<br />
   if (pE.preventDefault)<br />
      pE.preventDefault();<br />
   if (window.event)<br />
      pE.returnValue = false;<br />
   if (pE.cancel != null)<br />
      pE.cancel = true;<br />
}  // 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.
GeneralShift+Number Key Pin
RUmayaldevi14-Apr-09 1:08
RUmayaldevi14-Apr-09 1:08 
GeneralRe: Shift+Number Key Pin
Yongseop Kim1-Mar-12 19:19
Yongseop Kim1-Mar-12 19:19 
Generalused somehow Pin
noname-201324-Nov-08 9:55
noname-201324-Nov-08 9:55 
GeneralFix To Include numberpad Pin
Member 435567011-Nov-08 10:20
Member 435567011-Nov-08 10:20 
GeneralRe: Fix To Include numberpad Pin
dr_em5-May-09 20:58
dr_em5-May-09 20:58 
GeneralCross-browser support Pin
paul.m.wilkins5-Oct-08 13:46
paul.m.wilkins5-Oct-08 13:46 
Last Visit: 31-Dec-99 18:00     Last Update: 26-Apr-24 23:54Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 4 Oct 2008

Article Copyright 2008 by Gary Dryden
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1