Question

我有这个脚本，当按下键盘上的“N”和“P”键时，它会触发滚动到next / prev。我的问题是当用户以任何形式（例如搜索字段，登录字段等）正常键入这些字母时，如何阻止此操作，因为当我按下n时，例如约翰在一个形式它不写N而不是它激发滚动功能。如何解决这种问题？

我的代码如下：

$(document).keydown(function (evt) {
    if (evt.keyCode == 78) {
        evt.preventDefault();
        scrollToNew();
    } else if (evt.keyCode == 80) {
        evt.preventDefault();
        scrollToLast();
    }
});

谢谢。

Answer 1

事件对象具有target属性，该属性告诉您事件实际发生的位置（之后它会冒泡到文档级处理程序）。因此，您可以针对表单字段元素测试evt.target，如果匹配，则不要执行您的特殊逻辑。

最简单的方法可能是使用closest，例如：

$(document).keydown(function (evt) {
    if (!$(evt.target).closest('input, select, textarea')[0]) {
        if (evt.keyCode == 78) {
            evt.preventDefault();
            scrollToNew();
        } else if (evt.keyCode == 80) {
            evt.preventDefault();
            scrollToLast();
        }
    }
});

我在问这个最接近的表单字段是从元素开始的（因为closest从你给它的元素开始）并通过祖先进行处理。如果有非，则返回的jQuery对象将为空，[0]将返回undefined。因为!undefined是true，我们将在表单字段中不时处理您的逻辑。

Answer 2

我认为像

$('form').on('keydown', function(event) {event.stopPropagation();});

如果您不需要表单内部的键盘控件，

应该可以解决问题。

Answer 3

使用Event object的target属性，该属性指向源DOM节点。所以，你可以轻松使用

var nn = evt.target.nodeName.toLowerCase();
if (nn != "input" && nn != "textarea")
    // do your special handling

但是检查form property的存在可能更容易，{{3}}指向元素所有者形式：

if (! "form" in evt.target)
    // do your special handling

如何在表单中输入字母时停止键盘功能？

3 个答案: