测试任何输入是否有焦点答案

【问题标题】：Test if any input has focus测试任何输入是否有焦点
【发布时间】：2013-05-22 18:52:55
【问题描述】：

我正在使用键盘快捷键构建一些东西，例如您按 Ctrl+m 打开菜单。我使用 jQuery 和 jwerty 插件，这看起来像下面的代码：

jwerty.key('m', function () {
    toggleMenu();
});

点击“m”键触发toggleMenu功能。

现在我想知道如何防止在用户输入输入字段或文本区域时触发此功能。

【问题讨论】：

我在 Git 的 documentation 中找到了这个。 如果您绑定到一个选择器并且不需要上下文，您可以省略它：jwerty.key('⌃+⇧+P/⌘+⇧+P', function () { [...] }, 'input.email', '#myForm'); 尝试一下并告诉我们。
function toggleMenu(){alert('ok');} jwerty.key('m', toggleMenu, "body:not(input)");这应该可以工作，但即使在输入中也不会触发

标签： javascript jquery

【解决方案1】：

我从未使用过 jwerty，但我建议：

jwerty.key('m', function (e) {
    if (e.target.tagName.toLowerCase() !== 'input') {
        toggleMenu();
    }
});

这会测试事件的目标，如果它不是input，则调用toggleMenu() 函数；如果它是一个input，它什么也不做（尽管你可以明确地return false，如果你愿意的话）。

考虑到textarea，正如我应该做的那样，可以扩展上述内容（在if 评估中添加另一个子句，或者可以采取以下基于switch 的方法：

jwerty.key('m', function (e) {
    switch (e.target.tagName.toLowerCase()) {
        case 'input':
        case 'textarea':
            break;
        default:
            toggleMenu();
            break;
    }
});

如果目标元素是input 或textarea，则按m 不会执行任何操作，而如果不是这两个元素中的任何一个，则进入默认状态并toggleMenu()被调用。

【讨论】：

别忘了textarea
我还在基于此的新代码中考虑了选择，因为您可以使用“m”转到以“m”开头的项目，例如'摩纳哥'。谢谢！
if (/[^input|textarea|select]/i.test(e.target.tagName)) { 这也可以FIDDLE
这很聪明，而且更短。

【解决方案2】：

您可以使用jQuery（和一些浏览器）提供的:focus选择器和is函数来测试一个项目是否有焦点：

$(".my-thing").is(':focus')

【讨论】：

这个正好相反，我想检查一下是否没有焦点
有点跑题了，但这似乎在 PhantomJS 中不起作用

【解决方案3】：

一种方法是在您的输入和文本区域上添加另一个事件处理程序，该处理程序调用event.stopPropagation()（或者如果您使用jQuery，则为return false）。这样，事件处理程序将首先被触发，它会阻止事件“传播”到您现有的处理程序。

另一种选择是检查现有处理程序中的事件以查看它是否来自输入/文本区域（如果您想采用这种方法，请参阅其他答案；如果您关心（真的）旧浏览器的向后可比性，您'会想使用大卫的答案，因为旧浏览器不支持activeElement：Which browsers support document.activeElement?）。

【讨论】：

比IE4更老？ mdn

【解决方案4】：

您可以检查活动元素是否为正文元素。如果是，则不关注任何输入。

var nothingIsFocused = document.activeElement === document.body

if (nothingIsFocused) {
  ...
}

【讨论】：