CODEWITHSUNDEEP
javascripthtml
ICY Counter-Strike and League
ICY Counter-Strike and League

Reputation: 51

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

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.

Upvotes: 1

Views: 502

Answers (5)

BeerusDev
BeerusDev

Reputation: 1509

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
  }
});

Upvotes: 2

coolaj86
coolaj86

Reputation: 77024

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

<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!!");
  }
})

Upvotes: 0

thchp
thchp

Reputation: 2374

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.

Upvotes: 1

lbsn
lbsn

Reputation: 2412

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
    }
});

Upvotes: 2

Tuan Dao
Tuan Dao

Reputation: 2805

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

Upvotes: -1

Related Questions