jQuery: keyPress Backspace wird nicht ausgelöst?

186

Ich frage mich, was ich falsch mache:

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

Ich möchte, dass meine doSearch()Funktion auch ausgelöst wird, wenn ich die BackspaceTaste drücke. Im Moment passiert absolut nichts, wenn ich Backspacein Chrome und Safari drücke .

irgendwelche Ideen?

jquery keypress backspace matt
quelle
Sie können dieses jQuery-Plugin code.google.com/p/js-hotkeys ausprobieren und den Alias ​​"Rücktaste" verwenden
José Manuel Lucas
3
Es wird nicht auf Chrom, sondern auf Firefox ausgelöst.
vsync
Entschuldigung für die Nekropostierung, aber es ist erwähnenswert, dass e.which gegenüber e.keyCode bevorzugt wird
Henry Howeson

Antworten:

324

Verwenden Sie keyupanstelle von keypress. Dies erhält alle Schlüsselcodes, wenn der Benutzer etwas drückt

Jonathon Bolster
quelle
37
Warum sollte keyupfür Backspace gefeuert werden, wenn dies keypressnicht der Fall ist?
Aaron Digulla
es ist der Fall. Keyup löst die Rücktaste aus, Tastendruck nicht -> komisch. Gibt es eine Möglichkeit zu überprüfen, ob zwei Tasten wie cmd-c oder cmd-v oder cmd-a gedrückt werden
matt
17
Es hängt tatsächlich vom Schlüssel ab. Sie möchten keypressfür EnterSchlüssel, keydownfür Backspaceund so weiter verwenden; Andernfalls funktionieren Ihre Ereignisse in einigen Browsern nicht wie erwartet, insbesondere wenn Sie das Standardverhalten für den Schlüssel verhindern möchten. Wenn Sie das falsche verwenden, wird entweder Ihr Ereignis überhaupt nicht erfasst (wie dies bei Backspace der Fall ist) oder Sie können es nicht verhindern. da es bereits passiert, bevor Ihr Ereignisbehandlungscode darauf gelangt.
srcspider
5
Das Problem mit dieser Antwort ist , dass die Verwendung keyupwird das Zahlenfeld brechen . Kennen Sie eine Antwort, mit der Sie eine Taste auf einer vollständigen Tastatur korrekt erkennen können?
Hughes
6
keydownist die bessere Option für alle Schlüssel
artfuldev
32

Ich bin selbst darauf gestoßen. Ich habe es benutzt, .ondamit es ein bisschen anders aussieht, aber ich habe das gemacht:

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

Hier meine Arbeit hinzufügen. Ich musste ssn löschen, das vom Benutzer eingegeben wurde, also tat ich dies in 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();
            }
        }
    });
rauben
quelle
1
Dies funktioniert mit Firefox, wenn Sie event.which anstelle von event.keyCode api.jquery.com/event.which
BishopZ
11

Wenn Sie das Ereignis nur bei Änderungen Ihrer Eingabe auslösen möchten, verwenden Sie: 

$('.s').bind('input', function(){
  console.log("search!");
  doSearch();
});
Marcos Nunes
quelle
inputbeobachtet auch keine keyCodes. Das würde auch nicht funktionieren.
Mark Pieszak - Trilon.io
3

Gemäß der jQuery-Dokumentation für .keypress () werden keine nicht druckbaren Zeichen abgefangen, sodass die Rücktaste beim Tastendruck nicht funktioniert, aber bei Keydown und Keyup:

Das Tastendruckereignis wird an ein Element gesendet, wenn der Browser Tastatureingaben registriert. Dies ähnelt dem Keydown-Ereignis, mit der Ausnahme, dass Modifikator- und nicht druckbare Tasten wie Shift, Esc und Delete Keydown-Ereignisse auslösen, jedoch keine Tastendruckereignisse. Je nach Plattform und Browser können andere Unterschiede zwischen den beiden Ereignissen auftreten. ( https://api.jquery.com/keypress/ )

In einigen Fällen ist ein Keyup nicht erwünscht oder hat andere unerwünschte Auswirkungen, und Keydown ist ausreichend. Eine Möglichkeit, dies zu handhaben, besteht darin keydown, alle Tastenanschläge abzufangen und dann eine Zeitüberschreitung für ein kurzes Intervall festzulegen, damit der Schlüssel eingegeben wird, und dann die Verarbeitung durchzuführen danach.

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