Как остановить событие keydown, вмешивающееся в поля формы?

Question

Я связал некоторые события с левой и правой клавишами со стрелкой, например, так:

$(document).keydown(function(e) {
    switch(e.which) {
        case 39: $("#next").trigger('click');
        break;

        case 37: $("#prev").trigger('click');
        break;              
    }
});

Однако, если вы находитесь в форме и нажимаете влево и вправо для перемещения по тексту, эти события запускаются.

Как мне изменить это, чтобы этого не случилось?

Answer 1

Вы можете проверить цель события ( больше информации здесь )

$(document).keydown(function(e) {
    //var target = (e.target) ? e.target : e.srcElement; // IE uses srcElement
    // jQuery seems to handle this, so e.target should be fine

    if(e.target.nodeName != 'INPUT') {
        switch(e.which) {
            case 39: $("#next").trigger('click');
            break;

            case 37: $("#prev").trigger('click');
            break;              
        }
    }
});

или вы можете предотвратить всплывание события, подключив обработчик событий к элементам ввода:

$('input').keydown(function(e) {
    e.stopPropagation();
});

Обновление:

Аналогично, вы можете проверить имя узла для TEXTAREA.

Вот пример: http://jsfiddle.net/86CKw/1/

Answer 2

Это самое элегантное решение, которое я мог найти:

$(document).ready(function() {
  $(document).keypress(function() {
    if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) || event.target.type === "text") ) {
      return;
    }

    // deal with the events here
    ...

  }); 
});

Answer 3

if (e.target.closest('form').length===0) {
    // keypress did not occur inside a form. handle it.
}