如何使用 Javascript 函数修改 onKeyDown 事件答案

【问题标题】：How to modify onKeyDown event with Javascript function如何使用 Javascript 函数修改 onKeyDown 事件
【发布时间】：2019-05-18 11:43:05
【问题描述】：

我正在开发一个项目，当 1）单击按钮或 2）按下“返回”键时，javascript 函数会运行。 javascript 函数将 div 的可见性设置为“可见”，并更改“onclick”和“onKeyDown”属性以在第二次单击/按下时运行不同的函数。

例如，单击按钮（或按回车键）一次会使 div 出现，单击两次会使它消失。

问题是我无法弄清楚如何在触发函数时让 javascript 更改“onKeyDown”属性。这可能吗？

我的代码基于这个答案：Call a function when the enter button is pressed via Javascript

到目前为止，这是我的代码：

function visible() {
document.getElementById("box").style.visibility = "visible";
document.getElementById("button").onclick = hidden;
document.body.onKeyDown = "if(event.keyCode==13) hidden()";
}

function hidden() {
   document.getElementById("box").style.visibility = "hidden";
    document.getElementById("button").onclick = visible;
    document.body.onKeyDown = "if(event.keyCode==13) visible()";
}

#box {
  visibility:hidden;
  width:200px;
  height:200px;
  background:red;
}


#button {
  width:120px;
  height:50px;
  background:lightblue;
}

<html>

<body onKeyDown="if(event.keyCode==13) visible()">

<div id="box"></div>
<div id="button" onclick="visible()" ></div>

</body>

</html>

点击蓝框会出现红框，按回车也会出现；但再次按回车不会使框消失。

【问题讨论】：

第一个问题写得很好！

标签： javascript html

【解决方案1】：

JavaScript 的 onkeydown 属性区分大小写。因此，使用onKeyDown 会将不同函数设置为hidden，而body 的keydown 动作仍然是visible()。

要修复它，请将两个文件中的 onKeyDown 更改为 onkeydown。起初它有点令人困惑，因为它不遵循通常的大写语法，但所有 HTML 属性都是小写的。

另外，将onkeydown 设置为函数，而不是字符串：

document.body.onkeydown = function(){if (e.keyCode==13) visible()};

最后，e 没有定义。将其替换为event，它应该可以工作。

【讨论】：

感谢您的帮助。您的代码似乎确实在更改“onkeydown”属性；因为单击蓝色按钮两次然后按回车不会使红色 div 出现。但它实际上仍然没有使红色 div 消失。 jsfiddle：jsfiddle.net/uqz1xoya
@htmlcat e is not defined。尝试更改为event。
@htmlcat 或者你可以用 jsfiddle.net/ganeshie8/7t6ry4v1/7 替换你的整个 javascript
@rsadhvika 在您的回答中发布...它会使其更具原创性。

【解决方案2】：

function visible() {
  document.getElementById("box").style.visibility = "visible";
  document.getElementById("button").onclick = hidden;
  document.body.onkeydown = function() {
    if (event.keyCode == 13) hidden()
  };
}

function hidden() {
  document.getElementById("box").style.visibility = "hidden";
  document.getElementById("button").onclick = visible;
  document.body.onkeydown = function() {
    if (event.keyCode == 13) visible()
  };
}

#box {
  visibility: hidden;
  width: 200px;
  height: 200px;
  background: red;
}

#button {
  width: 120px;
  height: 50px;
  background: lightblue;
}

<html>

<body onKeyDown="if(event.keyCode==13) visible()">

  <div id="box"></div>
  <div id="button" onclick="visible()"></div>

</body>

</html>

【讨论】：