Question

我正在尝试为一个简单的密码检查程序创建代码，该密码检查程序将成为我为学生提供的活动网站的一部分。我不在乎密码是否易于在代码中找到。我只是希望学生能够输入密码，然后按回车或点击按钮查看密码是否正确。

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

按钮正在提交表单，重新加载页面。

在按钮的onclick属性中，您需要return false覆盖浏览器实际发送表单的默认行为：

<input type="button" id="subPass" value="ACCESS" onclick="isValid(this); return false">

正如Marvin在评论中提到的那样，您还需要修复文本输入的onkeydown属性中的引号并删除一些额外的空格：

<input type="text" id="keyvalue" name="keyvalue" onkeydown="if (event.keyCode == 13) document.getElementById('subPass').click()">

Answer 2

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

在HTML / Javascript中创建一个简单的密码检查器，在密码正确的情况下显示div

2 个答案: