jQuery: keyPress Backspace não dispara?

186

Eu me pergunto o que estou fazendo de errado:

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

Quero que minha doSearch()função também seja acionada ao pressionar a Backspacetecla. No momento, nada acontece quando pressiono o BackspaceChrome e o Safari.

alguma ideia?

mate
fonte
Você pode tentar este plugin jQuery code.google.com/p/js-hotkeys e usar o "retrocesso" Alias-chave
José Manuel Lucas
3
Ele não dispara no Chrome, mas no Firefox.
vsync
Sorry for necroposting mas é importante notar que e.which é preferido sobre e.KeyCode
Henry Howeson

Respostas:

324

Use em keyupvez de keypress. Isso obtém todos os códigos de tecla quando o usuário pressiona algo

Jonathon Bolster
fonte
37
Por que keyupdispararia para o Backspace quando keypressnão?
Aaron Digulla
é o caso Keyup dispara backspace, keypress não -> estranho. há uma chance de também verificar se duas teclas são pressionadas como cmd-c, ou cmd-v, ou CMD-a
mate
17
Na verdade, depende da chave. Você deseja usar keypressa Enterchave, keydownpara Backspaceassim por diante; caso contrário, você verá que seus eventos em alguns navegadores realmente não funcionam como o esperado, especialmente quando você deseja impedir o comportamento padrão da chave. Quando você usa o errado, o que acontecerá é que seu evento não é capturado (como é o caso do Backspace) ou você não pode evitá-lo; já que isso acontece antes que seu código de manipulação de eventos chegue a ele.
Srcpider
5
O problema com essa resposta é que o uso keyupvai quebrar o teclado numérico . Você conhece uma resposta que permita detectar corretamente qualquer tecla em um teclado completo?
Hughes
6
keydowné a melhor opção para todas as chaves
artfuldev
32

Eu me deparei com isso eu mesmo. Eu usei .onpara parecer um pouco diferente, mas fiz o seguinte:

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

Adicionando meu trabalho por aqui. Eu precisava excluir o ssn digitado pelo usuário, então fiz isso no 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();
            }
        }
    });
Roubar
fonte
1
isso funciona com firefox se você usar event.which vez de event.keyCode api.jquery.com/event.which
BishopZ
11

Se você deseja acionar o evento apenas nas alterações de sua entrada, use:

$('.s').bind('input', function(){
  console.log("search!");
  doSearch();
});
Marcos Nunes
fonte
inputtambém não observa keyCodes. Isso também não funcionaria.
Mark Pieszak - Trilon.io
3

De acordo com a documentação do jQuery para .keypress (), ele não captura caracteres não imprimíveis; portanto, o backspace não funcionará no pressionamento de tecla, mas é capturado no keydown e keyup:

O evento de pressionamento de tecla é enviado a um elemento quando o navegador registra a entrada do teclado. Isso é semelhante ao evento de pressionamento de tecla, exceto que as teclas modificadoras e não-imprimíveis, como Shift, Esc e excluem eventos de pressionamento de tecla do gatilho, mas não os eventos de pressionamento de tecla. Outras diferenças entre os dois eventos podem surgir, dependendo da plataforma e do navegador. ( https://api.jquery.com/keypress/ )

Em alguns casos, o keyup não é desejado ou tem outros efeitos indesejáveis ​​e o keydownpressionamento de tecla é suficiente; portanto, uma maneira de lidar com isso é usar para capturar todos os pressionamentos de tecla e definir um tempo limite de um intervalo curto para que a chave seja inserida e, em seguida, processar em Depois disso.

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