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>

单击以简单的登录表单按Enter键

1 个答案: