Monday, March 2, 2009

Cross-browser javascript IsNumeric() method




Please visit my new Web Site https://coderstechzone.com



To make a Client-side numeric textbox control using javascript is a common task in web development. Numeric checking may varried based on business logic. Like positive int, positive decimal, signed int or signed decimal. In my post i will try to focus on each requirement plus cross-browser compatibility. Here i will try to describe the script for 4 different methods for 4 business cases. Choose what you need.
4 cross-browser supported Client Side javascript IsNumeric() methods are as follows:

Check positve integer value:
function bINT(sText)
{
if(isNaN(parseInt(sText)))
return false;
}

Check signed integer value:
function bSignedINT(sText,obj)
{
var CurPos = 0;
if (document.selection)
{
obj.focus ();
var Sel = document.selection.createRange();
Sel.moveStart ('character', -obj.value.length);
CurPos = Sel.text.length;
}

if((CurPos>0 && sText=='-') (sText=='-' && obj.value.indexOf('-')>-1) (isNaN(parseInt(sText)) && sText!='-'))
return false;
}

Check positve decimal value:
function bDecimal(sText,obj)
{
if((sText=='.' && obj.value.indexOf('.')>-1) (isNaN(parseFloat(sText)) && sText!='.'))
return false;
}

Check signed decimal value:
function bSDecimal(sText,obj)
{
var CurPos = 0;

//FOR IE
if (document.selection)
{
obj.focus ();
var Sel = document.selection.createRange();
Sel.moveStart ('character', -obj.value.length);
CurPos = Sel.text.length;
}

// For Firefox
else if (obj.selectionStart obj.selectionStart == '0')
CurPos = obj.selectionStart;
if(CurPos>0 && sText=='-')
return false;
else if(sText=='-' && obj.value.indexOf('-')>-1)
return false;
else if(sText=='.' && obj.value.indexOf('.')>-1)
return false;
else if(isNaN(parseFloat(sText)) && sText!='.' && sText!='-')
return false;
}

Now i will show how one can add event handler for server side controls:
<asp:textbox onkeypress="return bINT(String.fromCharCode(event.keyCode));" id="txtINT" runat="server"></asp:TextBox>

<asp:TextBox runat="server" ID="txtSignedINT"
onkeypress="return bSignedINT(String.fromCharCode(event.keyCode),this);">
</asp:TextBox>

<asp:TextBox runat="server" ID="txtDecimal"
onkeypress="return bDecimal(String.fromCharCode(event.keyCode),this);">
</asp:TextBox>

<asp:TextBox runat="server" ID="txtSignedDecimal"
onkeypress="return bSDecimal(String.fromCharCode(event.keyCode),this);">
</asp:TextBox>

Also One can use above cross-browser supported javascript methods for HTML controls:
<input type="Text" onkeypress="return bINT(String.fromCharCode(event.keyCode));">
<input type="Text" onkeypress="return bSignedINT(String.fromCharCode(event.keyCode),this);">
<input type="Text" onkeypress="return bDecimal(String.fromCharCode(event.keyCode),this);">
<input type="Text" onkeypress="return bSDecimal(String.fromCharCode(event.keyCode),this);">

If you observer the all IsNumeric methods you will found that methods can handle minus(-) operator or minus sign, multiple or more than one dot or decimals in a number.

Script tested for:
1. Internet Explorer ( IE )
2. Mozilla Firefox
3. Opera
4. Google chrome

2 comments:

CMS said...

better isNumber function:

function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}

See http://dl.dropbox.com/u/35146/js/tests/isNumber.html
for details

juji said...

function isFloat(num){
return num%Math.floor(num);
}

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash