输入密码显示一个div？答案

【问题标题】：Input password to show a div?输入密码显示一个div？
【发布时间】：2018-04-16 10:39:55
【问题描述】：

我正在制作一个有趣的网站，我想在其中放置一个小彩蛋，您可以在其中输入密码以查看该网站上的隐藏页面。

我知道如何使用 html 制作登录表单，并且我得到了用于输入密码的“输入”标签，但我不确定“输出”应该是什么......？我还希望它仅在输入正确的文本时才显示 div 或 span。

如果我可以同时要求用户名和密码进行匹配，那就太棒了，但我根本不知道它是如何工作的。

【问题讨论】：

你尝试做什么？
这里有一个类似的话题，你可以试试解决方案：stackoverflow.com/questions/49755659/…

【解决方案1】：

function check_password (input_element) {
  
  //get value of input
  var password = input_element.value;
  
  //check value and show/hide the div
  if (password == 'secret')
      document.getElementById ('hidden_div').style.display = 'block';
  else
      document.getElementById ('hidden_div').style.display = 'none';

}

Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>

【讨论】：

【解决方案2】：

嗯，你需要 javascript 和一个简单的 onclicklistener。

例如：

<button onclick="checkHidden()">Login</button>

<script>
function checkHidden()
{
    if(document.getElementById("name").value == "Name" && document.getElementById("pw") == "123")
    {
        window.location.href = "andereSeite.html";
    }
}
</script>

但显然每个人都可以看到用户名和密码。他们只需要让他们显示来源。如果你想偷偷使用它，你需要使用 PHP :) 有很多关于表单 + PHP 的教程。

【讨论】：

【解决方案3】：

嗯，这是一个简单的例子。使用onkeyup="" 属性在每个输入的字符后运行javascript 函数check_password(this)（这是指输入标签）。如果密码正确，则 div 将显示为display: block/none;。

function check_password (input_element) {
  
  //get value of input
  var password = input_element.value;
  
  //check value and show/hide the div
  if (password == 'secret')
      document.getElementById ('hidden_div').style.display = 'block';
  else
      document.getElementById ('hidden_div').style.display = 'none';

}

Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>

【讨论】：