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:
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;
}
{
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;
}
{
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;
}
{
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;
}
{
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>
<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);">
<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:
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
function isFloat(num){
return num%Math.floor(num);
}
I WOULD BE DELIGHTED TO HEAR FROM YOU