在 jQuery 中绑定方向键，除了 input 和 textarea

Question

我发现了这个关于将箭头键与 jQuery 绑定的优秀问题：Binding arrow keys in JS/jQuery with a great solution from 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

您的可编辑元素可能有一些共同点class

$('.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();  
});

在 jQuery 中绑定方向键，除了 input 和 textarea

Binding arrow keys in jQuery except in input and textarea

javascript

jquery

keyboard

key-bindings