禁用某些键，但不能用于文本区域和输入

Question

我已经检查了这个出色的网站数据库，但以某种方式提供的答案不起作用。

为了防止故障，默认情况下，我必须禁用箭头键和空格键。可以使用以下代码：

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);

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

Answer 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.

Answer 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