单击以简单的登录表单按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

你可以听按键事件

<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>