如何实现按下Enter键触发HTML密码输入框的验证跳转

没问题，这就帮你搞定Enter键触发验证的功能！其实有两种简单的方式可以实现，下面我会给出修改后的完整代码，并解释关键改动点：

方法一：利用表单默认提交行为（推荐） #

这种方式更符合HTML表单的原生逻辑，既支持点击按钮，也支持按Enter键提交：

修改后的HTML #

<div class="div1">
  <div class="div2">
    <!-- 给表单添加onsubmit事件，阻止默认提交行为并调用验证函数 -->
    <form onsubmit="event.preventDefault(); checkPswd();">
      <input class="box" type="password" placeholder="123" id="pswd">
      <br>
      <!-- 将按钮类型改为submit，让表单识别为提交按钮 -->
      <input class="confirm" type="submit" value="SUBMIT" />
    </form>
  </div>
</div>

修改后的JavaScript（无需大改，保持原有逻辑即可） #

function checkPswd() {
  var confirmPassword = "asdf";
  var password = document.getElementById("pswd").value;
  if (password == confirmPassword) {
    window.location.replace('http://www.google.com');
  }
}

方法二：监听键盘事件（直接给输入框加Enter监听） #

如果你不想改动表单结构，也可以直接给密码输入框添加键盘按下事件，监听Enter键：

修改后的HTML #

<div class="div1">
  <div class="div2">
    <form>
      <!-- 给输入框添加keydown事件，监听Enter键 -->
      <input class="box" type="password" placeholder="123" id="pswd" onkeydown="if(event.keyCode === 13) checkPswd();">
      <br>
      <input class="confirm" type="button" value="SUBMIT" onclick="checkPswd();" />
    </form>
  </div>
</div>

JavaScript保持不变 #

和你原来的JS代码完全一致即可，不需要修改。

关键改动说明 #

• 方法一：把按钮从type="button"改成type="submit"，这样表单会把它识别为提交按钮；同时给表单添加onsubmit事件，用event.preventDefault()阻止表单默认的刷新提交行为，转而调用你的验证函数。
• 方法二：给密码输入框绑定keydown事件，当检测到按下的是Enter键（keyCode为13）时，直接调用checkPswd()函数。

两种方法都能实现你要的效果，推荐第一种，因为它更符合表单的原生交互逻辑，也更易于维护。

内容的提问来源于stack exchange，提问作者ersbygre1