JQuery: Как скрыть DIV, когда текстовое поле не в фокусе?

Это код, у меня есть:JQuery: Как скрыть DIV, когда текстовое поле не в фокусе?

<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" width="400px" 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>

Во-первых, когда эта страница загружается, то ДИВ #command загружается очень быстро, а затем исчезает. Мне нужно, чтобы div оставался скрытым до тех пор, пока элемент управления текстовым полем txtInsertComments не будет нажат или не получит фокус.

Во-вторых, когда пользователь щелкает из текстового поля txtInsertComments или что текстовое поле потеряло фокус, команда div # все еще присутствует и не скрыта.

Любая помощь приветствуется.

источник

2009-11-30 Chuck

Вы можете использовать CSS, чтобы скрыть #command DIV, пока вы не хотите, чтобы показать:

<div id="commands" style="display:none">

Затем используйте размытие/фокус, чтобы показать/скрыть # команды DIV:

$('#txtInsertComments').blur(function() { 
    $("#commands").hide() 
}).focus(function() { 
    $("#commands").show() 
});

источник

2009-11-30 16:58:37

display:none Первоначально на # командах.

<div id="commands" style="display:none">....

Для потери фокуса, просто использовать событие размытия:

$(el).blur(function(){...});

источник

2009-11-30 16:56:45

$(document).ready(function() { 
    $('#<%=txtInsertComments.ClientID%>').blur(function() 
     { $("#commands").hide() }); 
    $('#<%=txtInsertComments.ClientID%>').focus(function() 
     { $("#commands").show() }); 
});

источник

2009-11-30 16:57:48 Jimmeh

Большое спасибо за быстрый ответ. Оно работает! – Chuck

Хорошо, код, который вы мне показали, работает на базовой странице asp.net. У кого-нибудь есть опыт использования jQuery для вложенных элементов управления ListView? Этот же jQuery не работает с вложенными элементами управления ListView. – Chuck

большое спасибо;) этот код совершенен;) – Schewns

JQuery: Как скрыть DIV, когда текстовое поле не в фокусе?

ответ

Смежные вопросы