johnllao

October 2, 2009

Numeric Textbox

Filed under: Uncategorized — johnllao @ 9:00 am

In the code blow I will show a sample of numeric textbox control that extends from the ASP.NET textbox control. This control allows input of only muneric characters and automatically formats the number with commas when the control receives and lost the focus.

Hope this will be helpful to you.

Controls Code

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace SmartTextBox
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:SmartTextBox runat=server></{0}:SmartTextBox>")]
    public class SmartTextBox : TextBox
    {
        /// <summary>
        /// 
        /// </summary>
        /// <param name="e"></param>
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            string resourceName = "CustomControl.SmartTextBox.js";

            ClientScriptManager cs = this.Page.ClientScript;
            cs.RegisterClientScriptResource(typeof(SmartTextBox), resourceName);

        }
        /// <summary>
        /// 
        /// </summary>
        /// <param name="writer"></param>
        public override void RenderControl(HtmlTextWriter writer)
        {
            base.RenderControl(writer);
            writer.Write("<script type='text/javascript'>\n");
            writer.Write("if(document.getElementById('" + ClientID + "').attachEvent) {\n");
            writer.Write("document.getElementById('" + ClientID + "').attachEvent('onkeydown', NumberType);\n");
            writer.Write("document.getElementById('" + ClientID + "').attachEvent('onblur', function() { document.getElementById('" + ClientID + "').value = AddComma(document.getElementById('" + ClientID + "').value); } );\n");
            writer.Write("document.getElementById('" + ClientID + "').attachEvent('onfocus', function() { document.getElementById('" + ClientID + "').value = RemoveComma(document.getElementById('" + ClientID + "').value); } );\n");
            writer.Write("}\n");
            writer.Write("else if(document.getElementById('" + ClientID + "').addEventListener) {\n");
            writer.Write("document.getElementById('" + ClientID + "').addEventListener('onkeydown', NumberType, false);\n");
            writer.Write("document.getElementById('" + ClientID + "').addEventListener('onblur', function() { document.getElementById('" + ClientID + "').value = AddComma(document.getElementById('" + ClientID + "').value); } );\n");
            writer.Write("document.getElementById('" + ClientID + "').addEventListener('onfocus', function() { document.getElementById('" + ClientID + "').value = RemoveComma(document.getElementById('" + ClientID + "').value); } );\n");
            writer.Write("}\n");
            writer.Write("</script>");

        }
    }
}

Attached Javascript

String.prototype.count=function(s1) {
    return (this.length - this.replace(new RegExp(s1,"g"), '').length) / s1.length;
}

function NumberType() {
    NumbersOnly(event);
}

function NumbersOnly(evt) {
    var charCode = evt.keyCode; //alert(charCode);
    if ((charCode >= 48 && charCode <= 57) || charCode == 8 || charCode == 46 || charCode == 37 || charCode == 39 || charCode == 190) {
        if(charCode == 190 && evt.srcElement.value.count('.') >= 2 ){
            evt.returnValue = false;
        }
        else {
            evt.returnValue = true;
        }

    }
    else {
        evt.returnValue = false;
    }
}

function AddComma(number) {
    number += '';
    x = number.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;

}

function RemoveComma(number) {
    return number.replace(/,/g, '');
}

AssemblyInfo.cs

[assembly: TagPrefix("CustomControl", "custom")]
[assembly: WebResource("CustomControl.SmartTextBox.js", "text/javascript")]

Blog at WordPress.com.