Capturing "Delete" Keypress with jQuery

Question

When using the example code from the jQuery documentation for the keypress event handler, I'm unable to capture the Delete key. The snippet below is going to log 0 when the Delete key is pressed in FireFox:

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

Seems there's gotta be a way to capture the Delete key, but it's an ambiguous term so Google isn't proving to be much help with it.

WIth Jquery: `$(document).keyup( function(e) { if(e.key == 'Backspace' || e.key == 'Delete') { ... } });` — Avatar, Nov 12 '22 at 17:29

Philippe Leybaert · Accepted Answer · 2016-11-04T14:06:45.493

216

You shouldn't use the keypress event, but the keyup or keydown event because the keypress event is intended for real (printable) characters. keydown is handled at a lower level so it will capture all nonprinting keys like delete and enter.

edited Nov 04 '16 at 14:06

answered Jul 12 '09 at 15:34

Philippe Leybaert

168,566
31
210
223

```keyup``` would be do the job better. – atilkan Jun 15 '17 at 13:02
2

@atilkan no, the user expects feedback on `keydown`, not `keyup`. All text editors perform actions when a key is pressed, not when it's released. – Philippe Leybaert Jun 16 '17 at 14:15
2

@PhilippeLeybaert In my case program can't catch the last pressed char. – atilkan Jun 16 '17 at 14:24
same as atilkan, so i use keyup – Barbz_YHOOL Feb 21 '21 at 19:11

score 87 · Answer 2 · edited Feb 12 '17 at 01:41

87

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

^{Source: javascript char codes key codes from www.cambiaresearch.com}

edited Feb 12 '17 at 01:41

Lee Taylor

7,761
16
33
49

answered Jul 27 '12 at 10:21

Tod Palin

887
6
2

18

It should be `alert('Delete Key Released')`. – Waldheinz Apr 11 '13 at 14:45
if somebody uses keypress instead of keyup has suggested by Tod then you would get keycode == 46 event against . key (dot). but it works well with keyUp. Thanks – Mubashar Apr 02 '14 at 02:58
2

As pointed out in another answer, the `.keyCode` is deprecated. – xiGUAwanOU Jul 07 '22 at 12:14

score 39 · Answer 3 · edited Jul 30 '17 at 05:16

39

Javascript Keycodes

e.keyCode == 8 for backspace
e.keyCode == 46 for forward backspace or delete button in PC's

^{Except this detail Colin & Tod's answer is working.}

edited Jul 30 '17 at 05:16

Marcos Henzel

111
6

answered Nov 01 '12 at 10:39

csonuryilmaz

1,715
24
24

4

It should be **e.keyCode** and not e.KeyCode – Jerome Jun 26 '16 at 08:13

Gibolt · Answer 4 · 2020-07-07T02:22:25.683

27

event.key === "Delete"

More recent and much cleaner: use event.key. No more arbitrary number codes!

NOTE: The old properties (.keyCode and .which) are Deprecated.

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

Mozilla Docs

Supported Browsers

edited Jul 07 '20 at 02:22

answered Dec 03 '17 at 01:36

Gibolt

42,564
15
187
127

score 2 · Answer 5 · answered Mar 09 '21 at 01:24

2

You can track the delete/ backspace key with jQuery as follow:

 $(document).keyup(function(e){
   if(e.key === "Backspace") {
    alert('Delete key/ backspace');
   }
 });

answered Mar 09 '21 at 01:24

Danhdds

149
2
8

Capturing "Delete" Keypress with jQuery

5 Answers5

event.key === "Delete"

Linked

Related