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