Question

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

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

点击“m”键会触发toggleMenu函数。

现在我想知道如何在用户输入输入字段或textarea时阻止触发此功能。

Answer 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()。

Answer 2

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

另一种选择是检查现有处理程序中的事件，看它是否来自输入/ textarea（如果你想采用这种方法，请参阅其他答案;如果你关心（真的）旧的浏览器向后兼容性你我想使用David的答案，因为旧浏览器不支持activeElement：Which browsers support document.activeElement?）。

Answer 3

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

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

Answer 4

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

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

if (nothingIsFocused) {
  ...
}

测试任何输入是否有焦点

4 个答案: