如何在ASP.NET中实现文本框上的单击事件

本文关键字：单击 事件 文本 实现 ASP NET | 更新日期: 2023-09-27 18:03:05

在我的web应用程序中，我需要一个功能，这样当用户点击文本框输入值时，它应该使按钮和其他字段可见？

我正在使用下面提供的代码，但无法使其正常工作。

C#：

protected void TextBox1_Click(object sender, EventArgs e)
{
    ButtonSearch.Visible = true;
}

ASP.NET：

<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" OnClick="TextBox1_Click"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" OnClick="ButtonSearch_Click" Text="Search" Visible="False" />

如何做到这一点？

如何在ASP.NET中实现文本框上的单击事件

设置AutoPostback="True"。这样，事件将在服务器端激发，并且按钮将变为可见。

<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"     OnClick="TextBox1_Click" AutoPostBack="true"></asp:TextBox>

然而，如果您只想让按钮的可视性变差，那么您真的应该考虑javascript。这将节省返回服务器的行程。

<asp:TextBox onclick="txtBox1_ClientClicked()" ID="TextBox1" runat="server" OnClick="TextBox1_Click"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" OnClick="ButtonSearch_Click" Text="Search" style="display:none;" />
<script type="text/javascript">
    function txtBox1_ClientClicked(){
        var theButton = document.getElementById('<%=ButtonSearch.ClientID%>');
        theButton.style.display = 'block';
    }
</script>

您不需要发布回服务器即可完成您的工作。例如，您可以使用客户端onFocus事件和javascript/jquery。

我知道我使用了文本类型的输入，而你使用的是在服务器上发布的ASP控件，但这里有一个JSFiddle可以让你走上正轨：http://jsfiddle.net/Mmjtz/1/

$("<%= ButtonSearch.ClientID %>").click(function(){
$("#TextBox1").show():
});

在这段代码中，您需要传递您希望在单击按钮时可见的字段ID。

将文本框放在div中，并使用来自codeehind的div的onClick事件。这不是你要求的，但它对我来说很有效，没有任何错误。以下是实现请求事件的javascript函数：

function toggleVisibility() 
{
document.getElementById('TextBox1').disabled = true;
            /*
            ...some other code...
            */
}

当然，在实现这个JS函数之后，您必须在div定义中定义onclick事件。

<div id="TBdiv" onClick="toggleVisibility()">
<asp:TextBox ID="TextBox1"..../>
</div>

重要信息：由于您现在从codeehind禁用了TextBox，因此您必须在某个位置启用它，然后才能再次使用它。否则，在页面运行时将看不到它。

jQuery是解决您的问题的完美方案。代码应该是这样的：

$("#TextBox1").on("click",function(){$("#ButtonSearch").css("visibility", "visible");})

通过将<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>添加到页面来包含脚本，然后可以将上面的代码添加到<script></script>标记中。

相关文章：