Как показать div, когда текстовое поле сфокусировано и скрыть его, когда textarea размывается в jQuery?

Question

Так что мой вопрос немного сложнее, чем я мог бы поместиться в названии. Я пытаюсь воссоздать что-то вроде того, как trello делает комментарии на карточках. В trello, когда вы нажимаете внутри нового комментария textarea, textarea расширяется, а div содержит ссылку «Отправить комментарий», а также несколько других ссылок для разных показов действий (позволяет называть этот div «links-div».

Они просто делают это путем добавления «является сфокусированной» класс родительского DIV из «ссылки-DIV» и обрабатывать оон-скрытие с помощью CSS.

Где я застрял в том, что если вы щелкните за пределами текстового поля (размывание его), то текстовое поле стягивается вниз и «ссылки-ДИВ» скрывающей снова пОКА вы нажмите на одну из ссылок внутри из «ссылки-DIV».

Я хочу воссоздать это и иметь возможность щелкнуть ссылку или отправить кнопку внутри моего «link-div», не скрывая ее, но если я нажму что-нибудь за пределами этого «link-div», он должен скрыть как обычно. Как я могу воссоздать это? Благодарю.

Answer 1

Вот возможное решение jsbin

Это работает путем мониторинга focus и blur события на элементах внутри .comment и переключая класс на самом .comment.

Когда событие blur происходит на элементе внутри .comment, мы можем использовать e.relatedTarget, чтобы узнать, какой элемент имеет новый фокус. Затем мы можем проверить, существует ли вновь сфокусированный элемент внутри .comment или нет. Если это так, мы «отменим» blur. Если это не так, мы продолжим как обычно.

HTML

<div class="comment"> 
    <textarea id="ta"></textarea> 
    <div class="controls"> 
     <button>One</button> 
     <a href="#">Two</a> 
    </div> 
</div> 

<div> 
    <a href="#">This is outside the comment</a> 
</div> 

CSS

.comment .controls { 
    display: none; 
} 

.comment.is-focused .controls { 
    display: block; 
} 

Javascript/JQuery

// The selector ".comment *" will grab any element INSIDE a .comment 
$('.comment *').on('focus', function() { 
    // Whenever an element inside a comment gets the focus, give 
    // its parent element a class 
    $(this).parents('.comment').addClass('is-focused'); 
}); 

$('.comment *').on('blur', function (e) { 
    var $newFocus = $(e.relatedTarget); 

    if ($newFocus.parents('.comment').length > 0) { 
     // The newly focused element is inside a comment (potentially 
     // not the SAME comment - you'll want to fix this) so cancel 
     // the blur 
     e.preventDefault(); 
     return; 
    } 

    // The newly focused element is outside a comment, so continue 
    // to blur this element and also remove our class 
    $(this).parents('.comment').removeClass('is-focused'); 
}); 

Answer 2

Так что я получил эту работу после перехода в ответ по @Alex Макмиллан. Это на самом деле более просто, чем я думал об этом. Вместо использования событий .on 'focus' и .on 'blur' в текстовом поле я использовал событие .on 'mousedown' в документе.

Описание jsfiddle https://jsfiddle.net/h9ohkzdf/8/.

Я могу попробовать и использовать содержащий div вместо всего документа и посмотреть, работает ли это.