Click here to Skip to main content
15,867,308 members
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.1K   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
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

 
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 
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 
You can check whether pressed shift key through event shiftKey property.

if((code >= 48 && code <= 57 && e.shiftKey==false) || (code >= 96 && code <= 105))
{
...
}
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 

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.