Question

我有一个文字冒险游戏，用户需要输入命令以继续游戏。因此，不必让他们单击GO！按钮，我希望他们只能按Enter键。

如何将Enter键分配给该按钮。

Answer 1

正如其他开发人员所指出的那样，您应该真正研究JavaScript events。

也就是说，这是一个示例事件，它将监听文档中的“ Enter”键下降事件。

document.addEventListener("keydown", function (e) {
    e.preventDefault();
    if (e.key === "Enter") {
        console.log('You pressed enter.')
    }
});

Answer 2

您可以以编程方式触发元素上的click事件。在下面的代码段示例中，我们向Keyup EventListener对象添加了“ window”。为了捕获输入内容，您需要首先在摘要预览上的某个位置单击。因为当您单击预览时，您将专注于预览文档。

window.addEventListener('keyup', function(e) {
  if (e.which == 13) {
    e.preventDefault();
    document.getElementById('go-button').click();
  }
})

#scene {
  width: 500px;
  height: 300px;
  background-color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#go-button {
  cursor: pointer;
  outline: none;
  border: none;
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  color: #eee;
  font-size: x-large;
  border-radius: 55%;
}

#go-button span{
  font-size: small;
}

#go-button:hover {
  background-color: #729dee;
}

<div id="scene">
  <button onclick="alert('Go clicked')" id="go-button" type="button"> Go! <br> <span> [Enter] </span> </button>
</div>

如何为按钮分配键盘击键？

2 个答案: