5

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

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

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

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

4

4 回答 4

5

我从未使用过 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;
    }
});

如果 target-element 是 an inputor textarea，则 pressm不执行任何操作，而如果不是这两个元素中的任何一个，则进入并toggleMenu()调用默认状态。

于 2013-05-22T18:55:42.067 回答
0

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

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

于 2013-05-22T18:56:01.740 回答
0

您可以使用:focusjQuery（和某些浏览器）提供的选择器和is测试项目是否具有焦点的功能：

$(".my-thing").is(':focus')
于 2013-05-22T19:11:10.680 回答
0

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

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

if (nothingIsFocused) {
  ...
}
于 2018-05-02T17:20:49.703 回答