Захват нажатия клавиши «Удалить» с помощью jQuery

118

При использовании примера кода из документации jQuery для обработчика событий нажатия клавиши я не могу захватить Deleteключ. Приведенный ниже фрагмент будет записываться 0при Deleteнажатии клавиши в FireFox:

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

Кажется, должен быть способ захватить Deleteключ, но это неоднозначный термин, поэтому Google не очень помогает с этим.

Шейн Х
источник

Ответы:

202

Вы должны использовать не keypressсобытие, а событие keyupили, keydownпотому что keypressсобытие предназначено для реальных (печатаемых) символов. keydownобрабатывается на более низком уровне, поэтому он захватывает все непечатаемые ключи, такие как deleteи enter.

Филипп Лейберт
источник
keyupбудет делать работу лучше.
localhoost
2
@atilkan нет, пользователь ожидает обратной связи keydown, нет keyup. Все текстовые редакторы выполняют действия при нажатии клавиши, а не при ее отпускании.
Philippe Leybaert
1
@PhilippeLeybaert В моем случае программа не может поймать последний нажатый символ.
localhoost
82
$('html').keyup(function(e){
    if(e.keyCode == 46) {
        alert('Delete key released');
    }
});

Источник: коды клавиш javascript charcode с сайта www.cambiaresearch.com

Тод Пэйлин
источник
18
Так и должно быть alert('Delete Key Released').
Waldheinz
Если кто-то использует нажатие клавиши вместо предложенной Тодом клавиши, тогда вы получите событие keycode == 46 против. ключ (точка). но он хорошо работает с keyUp. Спасибо
Мубашар 02
34

Коды клавиш Javascript

  • e.keyCode == 8 дляbackspace
  • e.keyCode == 46 для кнопки forward backspaceили deleteна ПК

За исключением этой детали, ответ Колина и Тода работает.

csonuryilmaz
источник
4
Это должен быть e.keyCode, а не e.KeyCode
Джером
16

event.key === «Удалить»

Более свежие и более чистые: используйте event.key. Больше никаких произвольных цифровых кодов!

ПРИМЕЧАНИЕ. Старые свойства ( .keyCodeи .which) устарели.

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

Документы Mozilla

Поддерживаемые браузеры

Gibolt
источник