How To Cross-browser javascript IsNumeric() method


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

0 comments:

Post a Comment