javascript - 在简单的登录表单中单击按 Enter 键

Question

我有一个简单的登录表单，按下“登录”按钮时会执行一个功能。我想做的是让用户能够在页面上的任意位置按 Enter 键来触发登录按钮，就像单击一样。但是，我希望这样做，这样您就不必在特定的文本框/输入中才能工作。我希望用户填写用户名/密码，然后能够按 Enter 登录。

这是我的代码:

HTML

    <form id="login" method="post" name="login">
  <p>Username:</p>
  <input type="text" placeholder="Enter your username" name="username" id="username" />
  <p>Password:
    <p>
      <input type="password" placeholder="Enter your password" name="password" id="password" />
      <input type="button" value="Login" id="enter" onclick="compare()" />
</form>

JavaScript

function compare() {
  let user = document.getElementById("username").value;
  let pass = document.getElementById("password").value;

  if (user === "hello" && pass === "world") {
    console.log("Welcome.");
    alert("Welcome!");
  }
}

我最近还发现了“Unobtrusive JavaScript”，所以如果有一种方法可以在这里实现它，我会很乐意这样做。

提前致谢。

Answer 1

您可以监听 keydown 事件

<input type="text" placeholder="Enter your username" name="username" id="username"  onkeydown="handleEnter(event)"/>


<script>
function handleEnter(e) {
  if(e.keyCode === 13){
      compare()
  }
}

function compare() {
  let user = document.getElementById("username").value;
  let pass = document.getElementById("password").value;

  if (user === "hello" && pass === "world") {
    console.log("Welcome.");
    alert("Welcome!");
  }
}
</script>