jQuery: На фокусе ввода формы покажите, что отделение скрывает отделение на размытости (с протестом)
Я могу заставить скрытое отделение показать/скрыть, когда поле ввода находится в фокусе/размытости с помощью следующего кода:
$('#example').focus(function() {
$('div.example').css('display','block');
}).blur(function() {
$('div.example').fadeOut('medium');
});
Проблема, я хочу div.example продолжать быть видимым, когда пользователь взаимодействует в этом отделении. Например, нажмите, или выделение текста и т.д. в div.example. Однако div.example постепенно исчезает каждый раз, когда вход не находится в фокусе, и мышь взаимодействует с элементами в отделении.
HTML-код для входа и элементов отделения следующие:
<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());
Мои извинения, если это спросили прежде, но многие показывают/скрывают вопросы об отделении, которые я считал, не покрывают это. Спасибо за Ваш совет.:)
2 ответа
Если вы отслеживаете событие focusin в документе с момента появления пузырей 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()
});
Пример с использованием блока с абсолютным позиционированием: http://jsfiddle.net/9XmVT/14/
ОБНОВЛЕНИЕ
Бен Алман только что обновил свое событие 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();
Можно использовать таймер, чтобы ввести небольшую задержку, и остановить таймер, если есть фокус на поле или клик на 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);
})