Javascript 仅当两个元素未聚焦时才发生jQuery事件

我有一个名字和一个姓氏文本字段。我想在两个元素都聚焦时显示一行文本，并且仅在两个元素都未聚焦时隐藏该行文本

我当前的代码会翻转隐藏的文本，然后在我将焦点从名字更改为最后一个时取消隐藏

我理解为什么，名字变得模糊触发隐藏动画，而姓氏获得焦点触发显示动画。这是不可取的明显原因，我正在寻找一个优雅的修复

HTML

试一试

演示：

您可以执行以下操作：

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

演示：

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

尝试以下操作：

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

---

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

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

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

---

但只适用于点击。

看看这是否有助于复制我不同意，按钮在哪里？从第一个到最后一个更改时，这仍然会导致隐藏/显示jag。测试焦点的结果可能因浏览器而异。并非所有浏览器都以相同的顺序触发焦点/模糊/更改事件。我认为这就是问题所在。当您从一个单击到另一个时，它首先模糊旧字段，然后聚焦新字段。所以当模糊处理程序运行时，两个字段都没有被关注。我想我在几个月前研究过这个问题，规范要求这种行为。请参阅以了解解决方法。因为某些浏览器不支持模糊事件-将使用哪些浏览器？无论哪种方式，这都无助于解决OP描述的问题。我的意思是IE8和一些较旧的浏览器。IE至少从5.5版开始就支持模糊事件。我在jquery页面上读到：模糊事件不会在Internet Explorer中冒泡。因此，依赖于blur事件的事件委派的脚本将无法在浏览器之间一致地工作。但是，从1.4.2版开始，jQuery通过在其事件委派方法、.live和.delegate中将模糊映射到focusout事件来克服此限制。模糊事件在IE中不冒泡意味着模糊事件在IE中受支持，它只是不冒泡。对于不使用冒泡的OP代码来说，这一点都不重要。我再说一遍，IE至少从v5.5开始就支持blur。同样，这与OP描述的实际问题无关。这很有效，谢谢！只是希望我们不必使用这样一种老套的方法/不客气。如果你等待，其他人可能会有更直接的解决方案。

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);
});

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

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

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