Capturando "Delete" Keypress com jQuery


118

Ao usar o código de exemplo da documentação do jQuery para o manipulador de eventos keypress, não consigo capturar a Deletechave. O snippet abaixo irá registrar 0quando a Deletetecla for pressionada no FireFox:

$(document).keypress(function(e) {
    console.log(e.which);       
});

Parece que deve haver uma maneira de capturar a Deletechave, mas é um termo ambíguo, então o Google não está se mostrando muito útil.

Respostas:


202

Você não deve usar o keypressevento, mas o evento keyupou keydownporque o keypressevento se destina a caracteres reais (imprimíveis). keydowné tratado em um nível inferior, de modo que irá capturar todas as chaves não imprimíveis como deletee enter.


keyupseria fazer o trabalho melhor.
localhoost de

2
@atilkan não, o usuário espera feedback sobre keydown, não keyup. Todos os editores de texto realizam ações quando uma tecla é pressionada, não quando é liberada.
Philippe Leybaert de

1
@PhilippeLeybaert No meu caso, o programa não consegue capturar o último caractere pressionado.
localhoost de

82
$('html').keyup(function(e){
    if(e.keyCode == 46) {
        alert('Delete key released');
    }
});

Fonte: javascript char codes key codes from www.cambiaresearch.com


18
Deve ser alert('Delete Key Released').
Waldheinz

se alguém usar o keypress em vez do keyup sugerido por Tod, você obterá o keycode == 46 event against. chave (ponto). mas funciona bem com keyUp. Obrigado
Mubashar,

34

Javascript Keycodes

  • e.keyCode == 8 parabackspace
  • e.keyCode == 46 botão para forward backspaceou deletenos PCs

Exceto por esse detalhe, a resposta de Colin & Tod está funcionando.


4
Deve ser e.keyCode e não e.KeyCode
Jerome

16

event.key === "Excluir"

Mais recente e muito mais limpo: use event.key. Não há mais códigos numéricos arbitrários!

NOTA: As propriedades antigas ( .keyCodee .which) estão obsoletas.

document.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Delete") {
        // Do things
    }
});

Mozilla Docs

Navegadores Suportados

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.