web-dev-qa-db-fra.com

jQuery: keyPress Backspace ne se déclenche pas?

Je me demande ce que je fais 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 fonction doSearch() soit également activée lorsque je frappe le Backspace clé. Pour le moment, rien ne se passe quand je presse Backspace dans Chrome et Safari.

des idées?

jquerykeypressbackspace
176
matt

Utilisez keyup au lieu de keypress. Tous les codes de clé sont obtenus lorsque l'utilisateur appuie sur quelque chose.

304
Jonathon Bolster

Je suis tombé sur cela moi-même. J'ai utilisé .on donc ç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, donc 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();
            }
        }
    });
31
Rob

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

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

Selon la documentation de jQuery pour .keypress (), il ne capture pas les caractères non imprimables, donc le retour arrière ne fonctionnera pas avec la frappe, mais il est pris dans keydown et keyup:

L'événement touche est envoyé à un élément lorsque le navigateur enregistre une entrée au clavier. Cet événement est similaire à l'événement keydown, à l'exception des touches modificatrices et non imprimantes telles que les événements Maj, Echap et Suppression du déclencheur, mais pas les événements de pression. 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, keyup n'est pas souhaité ou a d'autres effets indésirables et keydown est suffisant. Une façon de le gérer est d'utiliser keydown pour intercepter toutes les frappes au clavier, puis de définir un délai d'expiration pour un intervalle court afin que la clé soit entrée. , puis faire le traitement là-bas après.

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