How can I detect if backspace is pressed on the site?

Question

I am currently making a simple online text editor site. And I cannot detect backspace being pressed. Here is the code: HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="cssfile/style.css">
    <title> Code Editor </title>
    <script src="jsfile/main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="navdiv"></div>
    <div id="board" class="board">

    </div>
</body>

</html>

js: This is my main code:

document.addEventListener("keypress", function (event) {
    console.log(event.key)
    if (event.key == "Enter") {
        document.getElementById("board").innerText += '\n'
    } else {
        document.getElementById("board").innerText += event.key
    }
});

This is my code and I tried

if(event.key == "Backspace")

But that didn't work.

when you press backspace what gets logged by your `console.log` line? — Jamiec, Sep 28 '21 at 14:25
Is it useful? https://stackoverflow.com/questions/2353550/how-to-capture-a-backspace-on-the-onkeydown-event — Antony Ng, Sep 28 '21 at 14:26
@Jamiec no i tried that it didnt work. That made me confused — ICY Counter-Strike and League, Sep 28 '21 at 14:26
@AntonyNg Hi i also tried those methods but none of them work. — ICY Counter-Strike and League, Sep 28 '21 at 14:28

score 2 · Accepted Answer · edited Oct 30 '21 at 23:49

2

You are close.

You are using keypress when you should be using keyup (or keydown if you want to know before the key press is complete).

KeyPress event is invoked only for character (printable) keys, KeyUp and KeyDown events is raised for all including non-printable such as Control, Shift, Alt, BackSpace, etc.

Try this:

document.addEventListener("keyup", function(event) {
  console.log(event.key);
  if (event.key === "Backspace") {
    document.getElementById("board").innerText += '\n'
  } else {
    document.getElementById("board").innerText += event.key
  }
});

edited Oct 30 '21 at 23:49

coolaj86

74,004
20
105
125

answered Sep 28 '21 at 14:29

BeerusDev

1,444
2
11
30

1

Yes i figured it out now, thanks for your help – ICY Counter-Strike and League Sep 28 '21 at 14:31
Any time! Don't forget to accept if this answer helped! – BeerusDev Sep 28 '21 at 14:31
Accepted this answer – ICY Counter-Strike and League Sep 28 '21 at 14:39

score 2 · Answer 2 · edited Sep 28 '21 at 14:31

2

keypress event has been deprecated and there's a change your browser doesn't support it. Use keydown instead.

document.addEventListener("keydown", function (event) {
    console.log(event.key)
    if (event.key == "Backspace") {
        document.getElementById("board").innerText += '\n'
    } else {
        document.getElementById("board").innerText += event.key
    }
});

edited Sep 28 '21 at 14:31

Jamiec

133,658
13
134
193

answered Sep 28 '21 at 14:30

lbsn

2,322
1
11
19

Yes i did and upvoted the answer – ICY Counter-Strike and League Sep 28 '21 at 14:32

score 1 · Answer 3 · answered Sep 28 '21 at 14:31

1

The keypress event is deprecated and triggers only when a key press produces a character value. Thus, it is not triggered with the backspace in your case.

You should use the keydown event.

answered Sep 28 '21 at 14:31

thchp

2,013
1
18
33

score 0 · Answer 4 · answered Oct 30 '21 at 23:48

2021 Update: Use `keyup` & `event.key`

❌ Bad

keydown lets you know when the key is pressed down, but this fires before any action takes place.
event.keyCode is both difficult to interpret (numbers representing letters and all), and deprecated

✅ Good

keyup fires after the backspace event has happened (i.e. a character was deleted), just like keypress
event.key is both universally supported and not deprecated

<form>
  <label>Foo:
    <input name="foobar" placeholder="ex: foobar" />
  </label>
</form>

document.querySelector('input[name="foobar"]').addEventListener('keyup', function (ev) {
  console.log(ev.key);
  if ("Backspace" == ev.key) {
    console.log("It's a backspace!!");
  }
})

Tuan Dao · Answer 5 · 2021-09-28T14:30:29.837

-1

You can use event.keyCode == 8.

document.addEventListener("keydown", function(event) {
  console.log(event.keyCode);
  if (event.keyCode == 8) {
    document.getElementById("board").innerText += '\n'
  } else {
    document.getElementById("board").innerText += event.key
  }
});

KeyCode Docs:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#constants_for_keycode_value

edited Sep 28 '21 at 14:30

answered Sep 28 '21 at 14:28

Tuan Dao

2,647
1
10
20

1

32 is the keyCode for Space bar. 8 is for backspace.. – BeerusDev Sep 28 '21 at 14:30
I figured it out i had to use keydown not keypress but still thanks for the help – ICY Counter-Strike and League Sep 28 '21 at 14:30

How can I detect if backspace is pressed on the site?

5 Answers5

2021 Update: Use keyup & event.key

2021 Update: Use `keyup` & `event.key`