Question

我有一个FIRST NAME和一个LAST NAME文本字段。我想在其中任何一个被聚焦时显示一行文本，并且只在两个元素都没有聚焦时才隐藏文本行。

每当我将焦点从第一个名称更改为最后一个名称时，我的当前代码会翻转文本（隐藏然后取消隐藏）。

我理解为什么，名字变得模糊（触发隐藏动画）然后姓氏得到焦点（触发节目动画）。出于显而易见的原因，这是不可取的，我正在寻找一个优雅的解决方案。

HTML

<input type="text" placeholder="First" id="first" name="first" required>
<input type="text" placeholder="Last" id="last" name="last" required>
<p id="nameTxt" style="display: none">Blah blah blah</p>

脚本

    $('#first, #last').focus(function() { $("#nameTxt").show(300); });
    $('#first, #last').blur(function() { $("#nameTxt").hide(150); });

Answer 1

你可以这样做：

var timerID;
$('#first, #last').focus(function() {
    clearTimeout(timerID);
    $("#nameTxt").show(300);
}).blur(function() {
    timerID = setTimeout(function() {
        $("#nameTxt").hide(150);
    }, 10);
});

演示：http://jsfiddle.net/VBwYE/

也就是说，使用setTimeout()推迟隐藏#nameTxt几毫秒，然后在焦点处理程序中取消超时。请注意，您可以将.focus().blur()链接在一起，以避免再次选择相同的两个元素。

Answer 2

这是一个有趣的！这是一个想法。你可以这样做：

$(document).mousedown(function(){
  if ($(event.target).attr("id") != "first" && $(event.target).attr("id") != "last") {
    // hide it
  }
  else{
    //show it
  }
});

仅适用于点击次数。

Answer 3

$("#first, #last").blur(function() {
    if ($("#first:focus, #last:focus").length == 0) {
        $("#nameTxt").hide(150);
    }
});

Answer 4

尝试

var $nt = $("#nameTxt");
$('#first, #last').focus(function () {
    clearTimeout($nt.data('nttimer'))
    $("#nameTxt").show(300);
});
$('#first, #last').blur(function () {
    var timer = setTimeout(function () {
        $("#nameTxt").hide(150);
    }, 200);
    $nt.data('nttimer', timer);
});

演示：Fiddle

Answer 5

试试这个::

<script>
    $('#first, #last').focus(function() { $("#nameTxt").show(300); });
    $('#first, #last').on("blur focusout", function() { $("#nameTxt").hide(150); });   
</script>

因为某些浏览器不支持模糊事件。

jQuery事件仅在两个元素未聚焦时才会发生

5 个答案: