переплет клавиши со стрелками в 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) 
}); 

КРОМЕ: Это предотвращает клавиши со стрелками от работы, как они обычно работают, когда фокус находится в текстовом поле ввода.

Как изменить это решение, чтобы клавиши со стрелками могли нормально функционировать, когда текущий фокус находится во входном, текстовом поле или в другой области редактирования контента?

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