JQuery: в фокусе ввода формы, show div. скрыть div на размытие (с оговоркой)

Я могу сделать скрытое div show/hide, когда поле ввода находится в фокусе/размытии, используя следующий код:

  $('#example').focus(function() {
    $('div.example').css('display','block');
  }).blur(function() {
    $('div.example').fadeOut('medium');
  });

Проблема в том, что я хочу, чтобы div.example продолжал быть видимым, когда пользователь взаимодействует внутри этого div. Например. нажмите или выделите текст и т.д. в div.example. Однако div.example исчезает всякий раз, когда вход не находится в фокусе, и мышь взаимодействует с элементами в div.

Код html для элементов ввода и div выглядит следующим образом:

<p>
<label for="example">Text:</label>
<input id="example" name="example" type="text" maxlength="100" />
<div class="example">Some text...<br /><br />More text...</div>
</p>

Как сделать так, чтобы div.example исчез только тогда, когда пользователь щелкает за пределы ввода и/или div.example? Я попытался экспериментировать с focusin/focusout, чтобы проверить фокус на <p>, но это тоже не сработало.

Было бы важно, чтобы div.example располагался непосредственно под полем ввода #example с помощью jQuery? Код, который делает это, выглядит следующим образом:

var fieldExample = $('#example');
$('div.example').css("position","absolute");
$('div.example').css("left", fieldExample.offset().left);
$('div.example').css("top", fieldExample.offset().top + fieldExample.outerHeight());

Мои извинения, если это было задано раньше, но многие показания/скрытые вопросы div, которые я читаю, не охватывают это. Спасибо за ваш совет.:)

Ответы

Ответ 1

Если вы отслеживаете событие focusin на документе с момента создания пузырьков, вы можете выяснить, находится ли новое в фокусе "снаружи", и если что-то об этом. Это будет работать как для кликов, так и для табуляции.

$('#example').focus(function() {
    var div = $('div.example').show();
    $(document).bind('focusin.example click.example',function(e) {
        if ($(e.target).closest('.example, #example').length) return;
        $(document).unbind('.example');
        div.fadeOut('medium');
    });
});
$('div.example').hide();​

Обновлен код для использования как события focusin, так и click, чтобы решить, следует ли скрыть файл div.example. Я использую события с именами, чтобы я мог вызвать unbind ('. Example'), чтобы отпереть оба из них.

Пример: http://jsfiddle.net/9XmVT/11/

Боковое примечание Измените код позиционирования css, чтобы вызвать метод CSS только один раз:

$('div.example').css({
    "position":"absolute",
    "left": fieldExample.offset().left,
    "top": fieldExample.offset().top + fieldExample.outerHeight()
});

Пример использования абсолютного позиционного div: http://jsfiddle.net/9XmVT/14/

UPDATE

Бен Альман только что обновил свое событие clickoutside и преобразовал его, чтобы обрабатывать много * внешних событий. http://benalman.com/projects/jquery-outside-events-plugin/

Позволит вам сделать что-то вроде этого:

$('#example').focus(function() {
    $('div.example').show().bind('focusoutside clickoutside',function(e) {
        $(this).unbind('focusoutside clickoutside').fadeOut('medium');
    });
});
$('div.example').hide();

Ответ 3

Вы можете использовать таймер, чтобы ввести небольшую задержку, и остановить таймер, если есть фокус на поле или щелчок на div:

var timer = false ;
$('#example').focus(function() {
    if (timer)
        clearTimeout(timer);
    $('div.example').css('display','block');

  }).blur(function() {

    if (timer)
        clearTimeout(timer);

    timer = setTimeout(function(){
            $('div.example').fadeOut('medium');
        },500);

  });

$('div.example').click(function(){
    if (timer)
        clearTimeout(timer);
})