Question

当点击文本框周围的div时，我有一个向下滑动的区域，然后该区域显示另一个文本框和一个按钮...基本上所有控件都提交了一个问题（标题，内容，提交按钮）。

但是，如果用户点击了除两个文本框或按钮之外的任何内容，我希望显示的区域向上滑动。

我需要的是一个jquery方法来调用onBlur上的两个文本框和按钮来检查文本框或按钮是否没有聚焦，这将向上滑动（.slideUp）该区域。

我如何使问题内容向下滑动足够简单......

        $(function () {
        $('.QuestionContentExpandClick').click(function () {

            /**** Slide the content div ****/
            var viewContent = $('#DivExpandQuestionContentArea');
            viewContent.slideDown('slow', function () {

            });
        });
    });

这是正在使用的.net控件。

<asp:PlaceHolder ID="PhdTopQuestionArea" runat="server">
<div class="KBTopQuestionContainer">

    <asp:TextBox ID="TxtQuestionReference" CssClass="QuestionReference" runat="server" />
    <asp:HiddenField ID="HidQuestionTracker" runat="server" />

    <table class="Table100PercentWidth">
        <tr>
            <td id="TbcKBTopQuestionImageCell" runat="server" class="KBTopQuestionImageCell">
                <asp:HyperLink ID="HlkAskQuestionProfileImage" runat="server">
                    <asp:Image ID="ImgAskQuestionProfileImage" runat="server" CssClass="KBTopQuestionImage" />
                </asp:HyperLink>
            </td>
            <td>
                <div class="KBTopQuestionContainerDiv">

                    <div id="DivExpandQuestionClickArea" runat="server">
                        <asp:HyperLink ID="HlkAskQuestionRedirect" runat="server" EnableViewState="false">
                            <asp:TextBox ID="TxtAskQuestionTitle" runat="server" CssClass="KBTopQuestionTitleTextbox" Text="Ask a Question about this topic..."
                                onfocus="feedbackTextBoxFocus(this,'Ask a Question about this topic...')" onblur="feedbackTextBoxBlur(this,'Ask a Question about this topic...')" />
                        </asp:HyperLink>
                    </div>
                    <div id="DivExpandQuestionContentArea" style="display:none;">
                        <div style="margin-top:15px;">
                            <asp:TextBox ID="TxtAskQuestionContent" runat="server" TextMode="MultiLine" Rows="7" CssClass="KBTopQuestionContentTextbox" Text="Add the content for your question..."
                                onfocus="feedbackTextBoxFocus(this,'Add the content for your question...')" onblur="feedbackTextBoxBlur(this,'Add the content for your question...')" />
                        </div>
                        <div style="text-align:right;margin-top:10px;">
                            <asp:Button ID="BtnAskQuestion" runat="server" CssClass="KBTopQuestionButton" Text="Post Question" OnClick="BtnAskQuestion_Click" />
                        </div>
                    </div>

                </div>
            </td>
        </tr>
    </table>

</div>

提前感谢您的任何帮助：）

Answer 1

基于上面提供的代码，我有点困惑，但为了回答您的基本问题，您可以使用document.activeElement检查元素是否处于焦点。因此，如果您有一个标识为TxtQuestionReference的textarea，您的代码将如下所示：

var textbox = document.getElementById('TxtQuestionReference'):
if (document.activeElement === textbox) {
    // do stuff
} else {
    // do other stuff
}

Answer 2

诀窍是看看什么控件将从focusout事件中获得焦点。

要做到这一点，请使用延迟很小的setTimeout，将检查放在下一个浏览器JS循环上（此时下一个项目将被聚焦）。

$('#DivExpandQuestionContentArea input').focusout(function () {
    var $container = $(this).closest('#DivExpandQuestionContentArea');

    // wait for the new element to be focused
    setTimeout(function () {
        // See if the new focused element is in the editor
        if ($.contains($container[0], document.activeElement)) {
            // we are still focused on the group of controls
        }
        else
        {
            // we are not focused on this group
        }
    }, 1);  // Wait 1 cycle (0 should work just as well, but not tested)
});

您还可以在此处查看我的答案以获取更多详细信息：How do I detect when a div has lost focus?

jquery检查项目是否在焦点上，如果没有，则对其进行操作

2 个答案: