JQuery：当文本框失焦时，如何隐藏 DIV？
Posted
技术标签:
【中文标题】JQuery：当文本框失焦时，如何隐藏 DIV？【英文标题】：JQuery: How do I hide a DIV when textbox is out of focus? 【发布时间】：2009-11-30 16:53:44 【问题描述】：这是我的代码：
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtInsertComments" CssClass="expanding" runat="server" AutoPostBack="false" TextMode="MultiLine"></asp:TextBox>
</div>
<div id="commands">
<table cellpadding="0" cellspacing="0" id="tblCommands">
<tr>
<td style="width: 50%; text-align: center;">
<asp:LinkButton ID="lnbInsertRes" runat="server" CommandName="Insert" Font-Underline="false">Insert</asp:LinkButton>
</td>
<td style="width: 50%; text-align: center;">
<asp:LinkButton ID="lnbCancelRes" runat="server" CommandName="Cancel" Font-Underline="false">Cancel</asp:LinkButton>
</td>
</tr>
</table>
</div>
</form>
</body>
<script type="text/javascript">
$(function()
$("#commands").hide("normal");
$("textarea[id$=txtInsertComments]").focus(function()
$("#commands").show("normal");
);
);
</script>
</html>
首先，当这个页面被加载时，div #command 被加载得非常快，然后就消失了。我需要 div 保持隐藏，直到文本框 txtInsertComments 控件被单击或获得焦点。
其次，当用户点击文本框 txtInsertComments 或者文本框失去焦点时，div #command 仍然存在并且没有隐藏。
感谢任何帮助。
【问题讨论】：
【参考方案1】：您可以使用 CSS 隐藏#command DIV，直到您想显示它：
<div id="commands" style="display:none">
然后使用模糊/聚焦显示/隐藏#commands DIV：
$('#txtInsertComments').blur(function()
$("#commands").hide()
).focus(function()
$("#commands").show()
);
【讨论】：
【参考方案2】：最初在#commands 上设置display:none。
<div id="commands" style="display:none">....
为了失去焦点，只需使用模糊事件：
$( el ).blur( function()... );
【讨论】：
【参考方案3】：$(document).ready(function()
$('#<%=txtInsertComments.ClientID%>').blur(function()
$("#commands").hide() );
$('#<%=txtInsertComments.ClientID%>').focus(function()
$("#commands").show() );
);
【讨论】：
好的，你们向我展示的代码适用于基本的 asp.net 页面。有没有人有使用 jQuery 进行嵌套 ListView 控件的经验？同样的 jQuery 不适用于嵌套的 ListView 控件。以上是关于JQuery：当文本框失焦时，如何隐藏 DIV？的主要内容，如果未能解决你的问题，请参考以下文章
JS事件 失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。