jQuery: keyPress Backspace ne se déclenche pas?

186

Je me demande ce que je fais de mal:

$(".s").keypress(function(e) {
   switch (e.keyCode) {
      case 8: // Backspace
      //console.log('backspace');
      case 9: // Tab
      case 13: // Enter
      case 37: // Left
      case 38: // Up
      case 39: // Right
      case 40: // Down
         break;

      default:
         doSearch();
   }
});

Je veux que ma doSearch()fonction soit également déclenchée lorsque j'appuie sur la Backspacetouche. Pour le moment, absolument rien ne se passe lorsque j'appuie sur BackspaceChrome et Safari.

des idées?

jquery keypress backspace

— mat
source

Vous pouvez essayer ce plugin jQuery code.google.com/p/js-hotkeys et utiliser l'alias de touche "retour arrière"

— José Manuel Lucas

3

il ne se déclenche pas sur chrome mais sur Firefox.

— vsync

Désolé pour le nécropostage, mais il convient de noter que e.qui est préférable à e.keyCode

— Henry Howeson

324

Utilisez à la keyupplace de keypress. Cela obtient tous les codes de clé lorsque l'utilisateur appuie sur quelque chose

— Jonathon Bolster
source

37

Pourquoi keyuptirer pour Backspace alors keypressque non?

— Aaron Digulla le

c'est le cas. Keyup déclenche un retour arrière, la pression sur une touche ne le fait pas -> bizarre. y a-t-il une chance de vérifier également si deux touches sont enfoncées comme cmd-c, ou cmd-v, ou cmd-a

— matt

17

Cela dépend en fait de la clé. Vous voulez utiliser keypresspour la Enterclé, keydownpour Backspaceet ainsi de suite; sinon, vous constaterez que vos événements dans certains navigateurs ne fonctionnent pas vraiment comme prévu, en particulier lorsque vous souhaitez empêcher le comportement par défaut de la clé. Lorsque vous utilisez le mauvais, ce qui se passera soit votre événement n'est pas du tout capturé (comme c'est le cas pour Backspace), soit vous ne pouvez pas l'empêcher; car cela se produit déjà avant que votre code de gestion d'événements y parvienne.

— srcspider

5

Le problème avec cette réponse est que l' utilisation keyupva briser le pavé numérique . Connaissez-vous une réponse qui permet de détecter correctement n'importe quelle touche sur un clavier complet?

— hughes

6

keydownest la meilleure option pour toutes les clés

— artfuldev

32

Je suis tombé sur ça moi-même. Je l'ai utilisé, .ondonc ça a l'air un peu différent mais j'ai fait ceci:

 $('#element').on('keypress', function() {
   //code to be executed
 }).on('keydown', function(e) {
   if (e.keyCode==8)
     $('element').trigger('keypress');
 });

Ajout de mon travail ici. J'avais besoin de supprimer ssn tapé par l'utilisateur, alors je l'ai fait dans jQuery

  $(this).bind("keydown", function (event) {
        // Allow: backspace, delete
        if (event.keyCode == 46 || event.keyCode == 8) 
        {
            var tempField = $(this).attr('name');
            var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
            $('#' + hiddenID).val('');
            $(this).val('')
            return;
        }  // Allow: tab, escape, and enter
        else if (event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else 
        {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) &&       (event.keyCode < 96 || event.keyCode > 105)) 
            {
                event.preventDefault();
            }
        }
    });

— Rob
source

1

cela fonctionne avec Firefox si vous utilisez event.which au lieu de event.keyCode api.jquery.com/event.which

— BishopZ

11

Si vous souhaitez déclencher l'événement uniquement sur les modifications de votre entrée, utilisez:

$('.s').bind('input', function(){
  console.log("search!");
  doSearch();
});

— Marcos Nunes
source

inputn'observe pas non plus les keyCodes. Cela ne fonctionnerait pas non plus.

— Mark Pieszak - Trilon.io

3

Selon la documentation jQuery pour .keypress (), il n'attrape pas les caractères non imprimables, donc le retour arrière ne fonctionnera pas à la pression d'une touche, mais il est pris dans le keydown et le keyup:

L'événement keypress est envoyé à un élément lorsque le navigateur enregistre l'entrée au clavier. Ceci est similaire à l'événement keydown, sauf que les touches de modification et non imprimables telles que Shift, Esc et delete déclenchent les événements keydown mais pas les événements keypress. D'autres différences entre les deux événements peuvent survenir en fonction de la plate-forme et du navigateur. ( https://api.jquery.com/keypress/ )

Dans certains cas, le keyup n'est pas souhaité ou a d'autres effets indésirables et le keydown est suffisant, donc une façon de gérer cela consiste à utiliser keydownpour capturer toutes les frappes, puis définir un délai d'expiration d'un court intervalle pour que la clé soit entrée, puis effectuer le traitement dans après.

jQuery(el).keydown( function() { 
    var that = this; setTimeout( function(){ 
           /** Code that processes backspace, etc. **/ 
     }, 100 );  
 } );

— Alcyon
source