jQuery: keyPress Backspace won't fire?

Question

I wonder what I'm doing wrong:

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

I want my doSearch() function also to be fired when I hit the Backspace key. At the moment absolutely nothing happens when I press Backspace in Chrome and Safari.

any ideas?

Severn

You can try this jQuery plugin code.google.com/p/js-hotkeys and use the "backspace" key alias – Noman

it doesn't fire on chrome but does on Firefox. – Savonarola

Sorry for necroposting but it is worth noting that e.which is preferred over e.keyCode – Shoelace

Answer 1

Use keyup instead of keypress. This gets all the key codes when the user presses something

Flyer

Why would keyup fire for Backspace when keypress won't? – Mediative

it's the case. Keyup fires backspace, keypress doesn't -> weird. is there a chance to also check if two keys are pressed like cmd-c, or cmd-v, or cmd-a – Severn

It's actually dependent on key. You want to use keypress for Enter key, keydown for Backspace and so forth; otherwise you'll find your events in some browsers don't really work as you expect, especially when you want to prevent the default behavior for the key. When you use the wrong one, what will happen is either your event is not captured at all (as is the case for Backspace) or you can't prevent it; since it already happens before your event handling code gets to it. – Lobster

The problem with this answer is that using keyup will break the number pad. Do you know of an answer that allows correctly detecting any key on a full keyboard? – Shaner

this is not exactly right, because when I use keyup I get completely "wrong" codes for the keys, the same for the keydown, only keypress seemed to work for this issue, until I faced this backspace google chrome problem – Galloping

This won't be the solution if you won't to fire the function before user release the key! – Thermoelectrometer

keydown is the better option for all keys – Cavender

keydown also works better for when the user holds down the backspace key – Pilar

it does not seem to work with type = tel or type = password – Friesian

Sometimes it might be too late to listen for keyup. Use keydown – Protozoan

Answer 2

I came across this myself. I used .on so it looks a bit different but I did this:

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

Adding my Work Around here. I needed to delete ssn typed by user so i did this 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();
            }
        }
    });

Diamagnetism

this works with firefox if you use event.which instead of event.keyCode api.jquery.com/event.which – Camel

Answer 3

If you want to fire the event only on changes of your input use:

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

Coloration

input also doesn't observe keyCodes. This wouldn't work either. – Querist

Answer 4

According to the jQuery documentation for .keypress(), it does not catch non-printable characters, so backspace will not work on keypress, but it is caught in keydown and keyup:

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser. (https://api.jquery.com/keypress/)

In some instances keyup isn't desired or has other undesirable effects and keydown is sufficient, so one way to handle this is to use keydown to catch all keystrokes then set a timeout of a short interval so that the key is entered, then do processing in there after.

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

Merchantman