jQuery: в фокусе ввода формы показать div. скрыть div на размытие (с оговоркой) - PullRequest
Новая
       54

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

19 голосов
/ 11 марта 2010

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

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

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

HTML-код для элементов input и 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-вопросы, которые я прочитал, не охватывают это. Спасибо за совет. :)

Ответы [ 3 ]

29 голосов
/ 11 марта 2010

Если вы отслеживаете событие 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();
2 голосов
/ 07 июня 2012

http://jsfiddle.net/9XmVT/699/

мертв во время клика с Ифраме

1 голос
/ 14 марта 2010

Вы можете использовать таймер, чтобы ввести небольшую задержку и остановить таймер, если есть фокус на поле или щелчок по элементу 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);
})
...