如何在窗体中键入字母时阻止键盘功能触发

How to stop keyboard functions from firing when the letters are typed in a form?

本文关键字：键盘 功能 窗体      更新时间：2023-09-26

我有这个脚本，当按下键盘上的"N"和"P"键时，它会触发滚动到下一个/上一个。我的问题是当用户以任何形式（例如搜索字段、登录字段等）正常键入这些字母时，如何阻止它触发，因为当我按 n 例如 John 时，它不会写 N 而是触发滚动函数。如何解决这种行为？

我的代码如下：

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

谢谢。

事件对象有一个 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，我们将在不在表单字段中时处理您的逻辑。

我认为类似 

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

如果您不需要窗体内部的键盘控件，应该可以解决问题。

使用 Event 对象的 target 属性，该属性指向源 DOM 节点。因此，您可以轻松使用

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

但是检查 form 属性是否存在可能更容易，该属性指向元素所有者窗体：

if (! "form" in evt.target)
    // do your special handling
相关文章：