web-dev-qa-db-fra.com

jQuery: déclencher la fonction de pression de touche sur tout le document mais pas à l'intérieur des entrées et des zones de texte?

J'ai ceci …

$(document).keypress(function(e) {
        if ( e.keyCode === 119 ) // w
            doSomething();
    });

Wo lorsque vous appuyez sur "w" sur mon document, la fonction doSomething() se déclenche. Comment puis-je l'empêcher de se déclencher lorsque je tape actuellement (au point) dans un champ input ou textarea?

javascriptjquerykeypress
46
matt

Vous devrez filtrer les éléments après l'événement et non dans le sélecteur, comme ceci

$(document).on('keypress', function(e) {
    var tag = e.target.tagName.toLowerCase();
    if ( e.which === 119 && tag != 'input' && tag != 'textarea') 
        doSomething();
});

cela vérifie la variable du event.target, l'élément à l'origine de l'événement, et ne déclenche la fonction que si l'événement ne provient pas d'une entrée ou d'une zone de texte.

81
adeneo

Si votre gestionnaire d'événements est lié à document, l'événement aura déjà été déclenché sur l'élément d'entrée et propulsé jusqu'à l'élément html, vous devrez donc gérer l'exclusion dans le code du gestionnaire lui-même. L'alternative lie spécifiquement un deuxième gestionnaire pour les éléments d'entrée, ce qui empêche l'événement de se propager, mais ce n'est probablement pas la bonne approche.

Démo du code 

$(function() {
    $(document).keypress(function(e) {
        if ($(e.target).is('input, textarea')) {
            return;   
        }
        if (e.which === 119) doSomething();
    });
});​

p.s. vous pouvez jeter un œil à la documentation de l'objet événement jQuery pour voir quelles propriétés il expose.

13
nbrooks

Dans jQuery, e.which est la propriété normalisée, pas e.keyCode.

Pour vérifier si vous n'êtes pas dans une entrée, vous pouvez vérifier le document.activeElement:

$(document).keypress(function(e) {
    if (e.which === 119 && !$(document.activeElement).is(":input,[contenteditable]")) {
        doSomething();
    }
});

Démo. http://jsfiddle.net/pxCS2/1/

5
Esailija

La solution la plus simple et parfaite est:

$(document).keypress(function(e) {
    if (e.which == 119 && !$(':focus').length) {
        doSomething();
    }
});
2
Buzogany Laszlo