jQuery:在表单输入焦点上,显示div 隐藏div模糊(有一个警告)

前端之家收集整理的这篇文章主要介绍了jQuery:在表单输入焦点上,显示div 隐藏div模糊(有一个警告)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当使用以下代码输入字段在焦点/模糊时,我可以进行隐藏的div显示/隐藏:
$('#example').focus(function() {
    $('div.example').css('display','block');
  }).blur(function() {
    $('div.example').fadeOut('medium');
  });

问题是我希望div.example在用户在此div内进行交互时继续可见。例如。在div.example中单击或突出显示文本等。不过,div.example每当输入不对焦且鼠标与div内的元素进行交互时就会消失。

输入和div元素的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是否直接使用jQuery直接位于输入字段#example之下?这样做的代码如下:

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问题并不涵盖这一点。谢谢你的建议。 原文链接:https://www.f2er.com/jquery/182663.html

猜你在找的jQuery相关文章