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

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

2 голосов
/ 30 ноября 2009

Это код, который у меня есть: 

<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>

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

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

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

Ответы [ 3 ]

4 голосов
/ 30 ноября 2009

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

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

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

$('#txtInsertComments').blur(function() {
    $("#commands").hide()
}).focus(function() {
    $("#commands").show()
});
1 голос
/ 30 ноября 2009 
$(document).ready(function() {
    $('#<%=txtInsertComments.ClientID%>').blur(function() 
       { $("#commands").hide() });
    $('#<%=txtInsertComments.ClientID%>').focus(function() 
       { $("#commands").show() });
});
1 голос
/ 30 ноября 2009

Установить display:none первоначально для # команд. 

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

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

$( el ).blur( function(){...} );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...