Comment arrêter un événement de clavier qui interfère avec les champs de formulaire?

Question

J'ai lié des événements à se produire sur appuyer sur la touche flèche gauche et à droite comme ceci:

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

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

Cependant, évidemment, si vous êtes sous une forme et appuyez sur gauche et à droite pour vous déplacer dans le texte, ces événements se déclenchent.

Comment puis-je changer cela pour que cela n'arrive pas?

Answer 1

Vous pouvez vérifier la cible de l'événement (more information here)

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

ou vous pouvez empêcher l'événement de bouillonnement en attachant un gestionnaire d'événements aux éléments d'entrée:

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

Mise à jour :

De même, vous pouvez tester le nom de noeud pour TEXTAREA.

Voici un exemple: http://jsfiddle.net/86CKw/1/

Answer 2

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

Answer 3

C'est la solution la plus élégante que je pouvais trouver:

$(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 
    ... 

    }); 
});