javascript - 用 HTML/Javascript 制作一个简单的密码检查器，在密码正确时显示一个 div

Question

我正在尝试为一个简单的密码检查器编写代码，该代码将成为我为学生提供的事件网站的一部分。我不在乎密码是否很容易在代码中找到。我只是希望学生能够输入密码，然后按 Enter 或单击按钮来查看密码是否正确。

这是 JavaScript:

<script type="text/javascript">
  function isValid(){
  var keyvalue = document.getElementById('keyvalue').value;
  if (keyvalue == "miranda")
    {document.getElementById('welcomeDiv').style.display = "block";}
  else
    {alert('ACCESS DENIED')}
  }
</script>

HTML

<form name="PasswordField" action="">
  Type Password Below:</br>
  <input type="text" id="keyvalue" name="keyvalue" onkeydown = "if (event.keyCode == 13) document.getElementById('subPass).click()">
  <input type="button" id="subPass" value="ACCESS" onclick="isValid(this);">
</form>

<div id="welcomeDiv" style="display:none;" class="answer_list">
  </br>
  <p>ACCESS GRANTED</p></br>
  <a href="google.com">Click to go to next stage.</a>
</div>

单击该按钮效果很好，但如果我按 Enter 键，它会在重新加载页面之前短暂闪烁隐藏的 div，从而再次隐藏该 div。我正在尝试找出如何防止它这样做。

Answer 1

您的action=""可能没有做你该做的事。 使用 `onsubmit="return false;"' 代替:

<form name="PasswordField" onsubmit="return false;">
  Type Password Below:</br>
  <input type="text" id="keyvalue" name="keyvalue" onkeydown = "if (event.keyCode == 13) document.getElementById('subPass').click()">
  <input type="button" id="subPass" value="ACCESS" onclick="isValid(this);">
</form>

或者只是将其设为 <div而不是<form