Make a Client-Side Custom Events in ASP.NET Web-User Control

Question

I'm developing an Web-user control with a Text-box. Now i need to call Text-box's Client event from my aspx page. Can any one tell me how can i create client side custom events.

Edit-1

I need to create custom client side events in my user control. So that i can use this event for invocation of any java-scriptfunction from .aspx page where i used my custom control.

Edit-2

My Control

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl2.ascx.cs" Inherits="WebUserControl2" ClientIDMode="Predictable" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>
<link rel="stylesheet" href="GridViewCSSThemes/YahooGridView.css" type="text/css" media="screen" />
<script type="text/javascript">
    function isNumber(evt, id) {
        var a = document.getElementById(id).value;
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (a.indexOf(".") >= 0
        && charCode == 190) {
            return false;
        }
        else
            if (charCode != 46 && charCode != 37 && charCode != 39 && charCode != 34 && charCode != 190 && charCode != 110 && charCode > 31 && (charCode < 48 || charCode > 57)) {
                if (charCode < 96 || charCode > 105) {
                    return false;
                }
            }
        return true;
    }

    function formateValue(id) {
        var a = document.getElementById(id).value;
        var f = a.split(".");
        if (f.length > 2) {
            document.getElementById(id).value = f[0] + "." + f[1];
        }
        a = document.getElementById(id).value;
        if (a.indexOf(".") >= 0) {
            document.getElementById(id).value = a.substr(0, a.indexOf(".") + 1) + a.substr(a.indexOf(".") + 1, 4);
        }
        else if (a.length > 7) {
            document.getElementById(id).value = a.substr(0, 7) + "." + a.substr(7, a.length);
        }
        document.getElementById(id).title = "Input value: " + document.getElementById(id).value;
        document.getElementById('<%= Hidden_Value.ClientID%>').value = document.getElementById(id).value;
    }
    function test(id) {
        alert(document.getElementById(id).value);
    }
</script>
<div style="position:relative;border:none;" id="BssWebMasked">
    <asp:HiddenField ID="Hidden_Value" Value="" runat="server" />
    <asp:TextBox CssClass="tb10" Width="90" ID="txtAmt" runat="server" style="text-align:right;" 
        MaxLength="12" onkeydown="return isNumber(event, this.id)" onkeyup="formateValue(this.id)" >
    </asp:TextBox>
    <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="txtAmt" 
            ValidChars="0123456789." Enabled="True" />
    <asp:CompareValidator ID="CVAmt" runat="server" 
        ErrorMessage="Invalid value" Display="Dynamic"
        Operator="DataTypeCheck" Type="String" ControlToValidate="txtAmt" >
    </asp:CompareValidator>
</div>

.aspx Code

<%@ Register TagPrefix="uc1" TagName="UCMask" Src="~/WebUserControl2.ascx" %>
<uc1:UCMask runat="server" DValue="" ID="txtRate" />

Here i need to call a java-script function on onblur event.

Ex.:

<uc1:UCMask runat="server" DValue="" ID="txtRate" onCustomBlur="myFunction(this.id);"/>

Answer 1

To "OnLoad" event of your user control you need to register startup client script where you will get the TextBox.ClientID and write your JavaScript code. Something like..

string javaScript = string.format("$(#'{0}').on('input', function() {alert('change occured');})", MyTextBox.ClientID);

Page.ClientScript.RegisterClientScriptBlock (this.GetType(),
    "MyClientChangeEventKey", 
     javaScript,      
      true);