如何处理JavaScript弹出窗口的ESC键按下事件

当我们按下ESC键时，会使用keyup和keydown事件处理程序检测生成的事件。当键盘上按下ESC键时，事件处理程序会在页面上运行。让我们深入了解如何处理JavaScript弹出窗口上ESC键按下事件。

使用keydown事件

当按下键时，触发keydown事件。无论是否生成字符值，keydown事件都调用所有键，与不建议使用keypress事件相反。虽然keypress显示输入的哪个字符，但keydown和keyup事件提供一个指示哪个键被击中的代码。

语法

以下是keydown事件的语法

onkeydown = (event) => { };

让我们看看以下示例，以更好地理解如何处理JavaScript弹出窗口上ESC键按下事件。

示例

在以下示例中，我们正在运行脚本，使用keydown事件指示何时按下ESC键。

<!DOCTYPE html>
<html>
   <body onkeydown="esckey(event)">
      <p id="tutorial"></p>
      <script>
         function esckey(evt) {
            if (evt.keyCode == 27) {
               document.getElementById("tutorial").innerHTML=('按下了ESC键')
            }
         }
      </script>
   </body>
</html>

当执行脚本时，它将生成一个输出，使事件触发。当用户点击“esc”键时，它将显示“esc”键已被按下。

示例

考虑以下示例，在这里我们使用KeyDown事件来提醒“esc”键是否已按下。

<!DOCTYPE html>
<html>
   <body>
   <p>点击按钮，然后按ESC键</p>
   <button id="tutorial" type="submit">点击</button>
   <script>
      document.onkeydown = function(evt) {
         evt = evt || window.event;
         var isEscape = false;
         if ("key" in evt) {
            isEscape = (evt.key === "Escape" || evt.key === "Esc");
         } else {
            isEscape = (evt.keyCode === 27);
         }
         if (isEscape) {
            alert("已按下ESC键");
         }
      };
      </script>
   </body>
</html>

在运行上述脚本时，输出窗口将弹出，显示文本以及网页上的单击按钮。当用户单击按钮并按下esc键时，事件被触发，消息“按下了ESC键”将显示。

示例

执行以下脚本并观察对触发事件的响应，无论按下ESC键还是其他键。

<!DOCTYPE html>
<html lang="en">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <body>
      <script>
         $(document).keydown(function (eventValue) {
            if (eventValue.keyCode == 27) {
            document.write("按下了ESC键....");
         } else {
            document.write("按下了其他键....")
         }
      });
      </script>
   </body>
</html>