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

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.

CodePudding user response：

You are close,

You are using keypress when you should be using keydown.

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

Try this:

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

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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