jquery checking if items are in focus and if not then act on it

Question

I have an area sliding down when clicking on a div around a textbox, this area then reveals another text box and a button...essentially all the controls to submit a question (title, content, submit button).

However I want the area revealed to slide back up if the user has clicked on anything except either of the two textboxes or the button.

What I need is a jquery method to call on the onBlur for the two textboxes and button to check if the textboxes or the button is not in focus which will slide up (.slideUp) the area.

How i am making the question content slide down is simple enough...

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

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

            });
        });
    });

This is the .net controls being used.

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

Thanks in advance for any help :)

score 0 · Accepted Answer · answered Dec 03 '14 at 16:05

I am a little confused based on the code provided above, but to answer your fundamental question, you can check if an element is in focus using document.activeElement. So if you have a textarea with the id TxtQuestionReference your code would look something like this:

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

score 0 · Answer 2 · edited May 23 '17 at 12:27

The trick is the see what control is about to get the focus from inside a focusout event.

To do that use a setTimeout with tiny delay, to place the check on the next browser JS cycle (by which time the next item is focused).

$('#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)
});

You can also see my answer here for more details: How do I detect when a div has lost focus?

jquery checking if items are in focus and if not then act on it

2 Answers2