Question

我正在尝试为我的投资组合网站创建一个密码表单。输入类型有问题。

当我将输入类型设置为“提交”时，键入密码并按“返回”键将触发checkPswd（）函数。但是，它没有将我的网站链接到“ index2.html”。

当我将输入类型设置为“按钮”时，问题就反过来了。现在按下“返回”键将不会触发checkPswd（）。但是，当我用鼠标键单击submitubtton时，它确实链接到“ index2.html”。

我也尝试过使用（event.keyCode === 13）触发checkPswd，但是没有用。有人有解决方案吗？

    <div class="overlay_top">
          <div class="row justify-content-center" style="padding-top: 10%;">
                <form name="login">
                  <input type="password" id="pswd" class="form-control mx-sm-3" aria-describedby="passwordHelpInline" placeholder="Password" style="border-radius: 0rem; width:240px;">
                  <input type="submit" id="submitbutton" value="Submit" onclick=checkPswd() class="btn btn-white" style="border-radius: 0rem; width:240px; font-weight: 700;">
                </form>
          </div>
    </div>


    <script>
      function checkPswd() {
          var confirmPassword = "admin";
          var password = document.getElementById("pswd").value;
          if (password == confirmPassword) {
              window.location.href="index2.html";
          }
          else{
              alert("Passwords do not match.");
          }
      }
    </script>

Answer 1

窗体自然希望将请求发送到服务器，从而触发页面的重新加载。您可以做的是使用和eventListener（这样可以防止该行为），而不是像现在那样直接将处理程序置于内联中。您可以尝试以下方法：

<div class="overlay_top">
<div class="row justify-content-center" style="padding-top: 10%;">
  <form name="login">
    <input type="password" id="pswd" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"
      placeholder="Password" style="border-radius: 0rem; width:240px;">
    <input type="submit" id="submitbutton" value="Submit" class="btn btn-white"
      style="border-radius: 0rem; width:240px; font-weight: 700;">
  </form>
</div>

const submitBtnElem = document.querySelector('#submitbutton');

submitBtnElem.addEventListener('click', (e) => {
  e.preventDefault();
  checkPswd();
});

function checkPswd() {
  var confirmPassword = "admin";
  var password = document.getElementById("pswd").value;
  if (password == confirmPassword) {
    window.location.href = "index2.html";
  }
  else {
    alert("Passwords do not match.");
  }
}

编码愉快。＃欢呼声

我应该使用哪种输入形式输入密码？

1 个答案: