窗口获得焦点时输入焦点和模糊触发答案

【问题标题】：Input focus and blur firing when window gets focus窗口获得焦点时输入焦点和模糊触发
【发布时间】：2019-05-02 10:03:18
【问题描述】：

我在绑定了 focus() 和 blur() 事件的页面上有一个文本输入。如果我按照以下步骤操作，我会遇到焦点和模糊会意外触发的问题：

点击输入，focus() 触发。好的。
在另一个窗口上单击窗口外，blur() 触发。好的。
点击返回原来的窗口，focus()然后blur()在输入都触发。问题！

$('#password').focus(function(){
    $('#passwordStrength').slideDown(500);
}).blur(function(){ 
    $('#passwordStrength').slideUp(500);
});

我真的需要在窗口重新获得焦点时不要触发 focus() 和 blur() 事件，因为它会导致 div 快速出现然后消失。

关于如何阻止这种情况的任何想法？

【问题讨论】：

当他们“错误地”开火时，实际目标是什么？我的怀疑是整个页面都会得到一个 focus() 事件，所以你应该能够在它到达你的文本输入之前捕获它。
感谢您的评论@MikeBrockington，它让我找到了解决方案！现在，在我的模糊功能中，我在隐藏强度框之前检查文档是否具有焦点。

标签： javascript jquery

【解决方案1】：

我最终通过检查文档是否具有焦点作为我的模糊功能的一部分来解决这个问题。

$('#password').focus(function(){
    $('#passwordStrength').slideDown(500);
}).blur(function(){ 
    if (document.hasFocus()) {
        $('#passwordStrength').slideUp(500);
    }
});

这意味着当点击离开时，我的力量框会停留在页面上，然后在点击回到窗口时会正常运行。

感谢评论者试图帮助并让我走上正确的道路。

【讨论】：

【解决方案2】：

您可以使用window.onfocus 来检测当前选项卡是否获得焦点。

function focus () {
  $('#password').focus(function(){
    $('#passwordStrength').slideDown(500);
  }).blur(function(){ 
    $('#passwordStrength').slideUp(500);
  });
}
focus();
window.onfocus = function () {
    $('#password').focus();
  focus();
}

这里是fiddle

【讨论】：

不幸的是，这有同样的问题。如果在小提琴中单击密码字段，然后单击其他框之一，然后返回渲染窗口，您将看到强度框出现然后消失的相同问题。
在小提琴中，您在同一个选项卡中。我编辑了代码并添加了超时。 jsfiddle.net/4ceqj2zL