在 jQuery 中绑定箭头键，输入和文本区域除外

Question

我发现了这个关于用 jQuery 绑定箭头键的绝妙问题：Binding arrow keys in JS/jQuery，Sygmoral 提供了一个很好的解决方案：

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

EXCEPT：这可以防止箭头键按照焦点位于文本输入字段中时的正常工作方式工作。

当当前焦点位于输入、文本区域或其他内容可编辑区域时，如何修改此解决方案以允许箭头键正常工作？

Answer 1

把它放在一个条件中：

$(document).keydown(function(e) {
    if(!$(e.target).is(':input, [contenteditable]')){
        switch(e.which){
           // the cases as is
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    }
});

Answer 2

你可以使用event.target来获取事件的目标元素，这样你可以检查

var $target = $(e.target);
if($target.is("input") || $target.is("textarea")) {
    //
}

Answer 3

你的可编辑元素可能有一些共同的类

$('.input').keypress(function(event) {

    var charCode = (evt.which) ? evt.which : event.keyCode

    switch(charCode) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault();  
});