禁用某些键，但不适用于 textarea 和 input答案

【问题标题】：Disable certain keys, but not for textarea and input禁用某些键，但不适用于 textarea 和 input
【发布时间】：2014-08-21 01:00:06
【问题描述】：

我检查了这个很棒的网站数据库，但不知何故提供的答案不起作用。

为了防止出现故障，默认情况下我必须禁用箭头键和空格键。这适用于这段代码：

window.addEventListener("keydown", function(e) {
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

但是对于网站的某些区域（输入和文本区域），箭头键和空格键是必需的。为了允许，我做了如下：

window.addEventListener("keydown", function(e) {
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) && ($(event.target)[0]!=$("textarea, input")[0])) {
        e.preventDefault();
    }
}, false);

但它似乎不起作用。非常感谢您的帮助！

【问题讨论】：

你只是忘记了一个左括号..应该是这样的if(([32,
所以您将目标与页面上的第一个输入进行比较？所以只有页面上的第一个输入/文本区域才会如此。所有其他的都不会是真的......
@robert-rozas 感谢您的指出，但是有了这个设置，键仍然可以正常工作
考虑为输入和文本区域设置一个处理程序并使用e.stopPropagation()
@JCOC611 感谢您的快速回复！第二个代码是从@stackoverflow 找到的两个答案放在一起...你能举例说明它的外观吗？

标签： javascript jquery html preventdefault

【解决方案1】：

在这种情况下，您可以选择为所有textarea 和input 元素设置一个事件处理程序，并利用event.stopPropagation() 来防止窗口事件处理程序被触发。这样，元素捕获 keydown 事件，然后告诉 JavaScript 引擎不要触发 DOM 链中更高元素（例如文档或窗口）的其他事件处理程序。

window.addEventListener("keydown", function(e) {
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

使用 jQuery：

// Function gets run after document is loaded
$(function(){
   $("textarea, input").keydown(function(e){
      e.stopPropagation()
   })
});

编辑：工作jsFiddle.

【讨论】：

这个解决方案不知何故影响了这个steadicat.github.io/labels 怎么样？如果在 input/textarea 中填写文本，标签不会消失。
停止事件传播的事件处理程序正在覆盖插件中的事件处理程序。在这种情况下，您可以使用您最初想到的方法，也可以稍微编辑插件以在其自己的事件处理程序中的某个位置添加.stopPropagation()。

【解决方案2】：

您可以使用nodeName 属性获取目标元素名称：

var targettedElement = $(event.target)[0].nodeName.toLowerCase(); // its uppercase by default

然后你可以用它来有条件地检查：

window.addEventListener("keydown", function(e) {
    var targettedElement = $(event.target)[0].nodeName.toLowerCase();
    if(
        [32, 37, 38, 39, 40].indexOf(e.keyCode) > -1
        && targettedElement != 'textarea'
        && targettedElement != 'input'
    ) {
        e.preventDefault();
    }
}, false);

Fiddle

【讨论】：

感谢您抽出宝贵的时间，但第一个答案成功了！