Question

我正在尝试在div中按下键。但是我不确定如何只按下键。目前，当我尝试按该键时，什么都没有发生。

我的工作方式是

<div contenteditable="true" id="d"> </div>

<p id="log"></p>


const input = document.querySelector('input');
const log = document.getElementById('log');

document.getElementById("d").addEventListener("onkeyup", logKey)

function logKey(e) {
   log.textContent += ` ${e.code}`;
}

这里也是与其对应的jsfiddle：https://jsfiddle.net/hpeLqmyg/

我该怎么办？

Answer 1

将onkeyup更改为keyup

document.getElementById("d").addEventListener("keyup", logKey)

https://jsfiddle.net/2x8pcu0m/

Answer 2

尝试一下，您的代码有误。

仅用onkeyup代替keyup

const input = document.querySelector('input');
const log = document.getElementById('log');

document.getElementById("d").addEventListener("keyup", logKey)

function logKey(e) {
   log.textContent += e.code;
}

#d {
  width:50%;
  color:red;
  background-color: yellow;
}

<div contenteditable="true" id="d"> </div>

<p id="log"></p>

Answer 3

将onkeyup更改为keyup

const log = document.getElementById('log');

document.getElementById("d").addEventListener("keyup", logKey)

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

<div contenteditable="true" id="d"> </div>

<p id="log"></p>

您也可以使用e.key代替code

const log = document.getElementById('log');

document.getElementById("d").addEventListener("keyup", logKey)

function logKey(e) {
  log.textContent += ` ${e.key}`;
}

div {
  border: 1px solid red;
}

<div contenteditable="true" id="d"> </div>

<p id="log"></p>

如何只在div内按下键？

3 个答案: