Asp.net 需要在第二个文本框中同时显示

Question

我有两个文本框，我需要一个功能，例如如果我在第一个文本框中输入文本应该以其他字体显示在第二个文本框中。这是一个网络应用程序。所以文本框没有 OnKeyDown 事件？您有什么方法可以实现吗？

注意：我不想用 Javascript 来实现。

Answer 1

使用asp:UpdatePanel 的解决方案

使用这种方法，您无需自己编写一行 JavaScript；一切都由控件处理。

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>

TextChanged 事件的事件处理程序，Page.aspx.cs：

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

使用 ASP.NET 和 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：

 .special { font-family: YourFontFamilyOfChoice; }

测试结果

我已经使用 Firefox 3.6、Opera 10.6 和 Internet Explorer 8 在本地测试了这两种解决方案；两者都像魅力一样工作。

Answer 2

将jQuery (JavaScript) 与 CSS 结合使用。此解决方案不会触发回发：您的用户将在键入时看到发生的事情。


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;
    });
});