Asp.net need Simultaneous display in Second Text Box

I have two text boxes I need a functionality like If I am typing in 1st text box The text should be getting displayed in 2nd text Box with some other font. This is a web Application. And so Text Box doesn't have OnKeyDown event? Do you sugg开发者_如何学编程est any way to implement this?

Note: I don't want to implement this with Javascript.

Solution using an asp:UpdatePanel

With this approach, you don't need to write a single line of JavaScript by yourself; everything is handled by the control.

Page.aspx:

<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:TextBox runat="server" ID="text1" OnTextChanged="text1_TextChanged"></asp:TextBox>
        <asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>

Event handler for the TextChanged event, Page.aspx.cs:

protected void text1_TextChanged(object sender, EventArgs e) {
    text2.Text = text1.Text;
}

Solution using ASP.NET and jQuery

Page.aspx:

<script type="text/javascript">
    //As soon as the DOM is ready, execute the anonymous function
    $(function () {
        var textBox1 = $("#<%= text1.ClientID %>");
        var textBox2 = $("#<%= text2.ClientID %>");
        textBox1.keyup(function () {
            textBox2.val(textBox1.val());
        });
    });
</script>

<asp:TextBox runat="server" ID="text1"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>

CSS for both approaches:

 .special { font-family: YourFontFamilyOfChoice; }

Test Results

I've tested both solutions locally with Firefox 3.6, Opera 10.6, and Internet Explorer 8; both work like a charm.

Use jQuery (JavaScript) combined with CSS. This solution will not trigger a post-back: Your users will see stuff happen as they type.


CSS:

.normalFont { font-family: Arial; }
.alternateFont { font-family: Verdana; }

HTML:

<input ... class="normalFont" />
<input ... class="alternateFont" />

JavaScript (jQuery):

// When the DOM is ready, execute anonymous function
$(function ()
{
    // store a reference for the input with the "alternateFont" class
    var alternateFontInput = $("input.alternateFont")[0];

    // execute anonymous function on key-up event on the input with
    // the "normalFont" class
    $("input.normalFont").keyup(function ()
    {
        // set the value of the input with the "alternateFont" class to
        // the value of the input with the "normalFont" class (this)
        alternateFontInput.value = this.value;
    });
});