1

我正在尝试使用 JavaScript 对页面的一部分进行密码保护。用户将看到一个简单的输入字段和提交按钮，在输入正确的密码后，用户将获得对“隐藏”内容的访问权限。

目前，无法查看“隐藏”内容，因为每次重新加载页面时它都会被隐藏（在表单提交时发生）。

是的，我知道这不被视为“密码保护”，因为密码是在 js 本身中找到的，但这对于这种特定情况并不重要。

这是我的代码，感谢您的帮助。

<script language="JavaScript">
    window.onload=function(){
    var e = document.getElementById("hiddenContent");
    e.style.display = 'none';   
};
function showPass(form){
    var pass = form.pwd.value;

    if(pass == "password") {
        e.style.display = 'block';      
    }
}
</script>

<form action="#" onsubmit="showPass(form);return false">
Please Enter The Password: <input type="password" name="pwd" /> 
<input type="submit" value="Log In" />
</form>
<div id="hiddenContent">Here is the Hidden content...</div>

正确提交密码后如何查看隐藏内容？

4

2 回答 2

2

有两个问题会导致代码崩溃并停止执行。这会导致您的表单提交，这是您不想要的，并且您的其他代码也不会运行。

onsubmit="showPass(form)应该是onsubmit="showPass(this)

e不是全局变量。它被匿名函数包围，在外面不可见。这意味着 showPass() 不知道e指的是什么。改变这个

var e = document.getElementById("hiddenContent");

至

e = document.getElementById("hiddenContent"); （没有 var 关键字）

或者（也许更好）在 showPass() 中获得对该元素的唯一引用

于 2013-07-29T21:08:09.260 回答
0

我一直在寻找一个解决方案来做同样的事情。

我发现了一篇用哈希解释的帖子

如何在客户端 javascript 应用程序中隐藏凭据

首先你需要使用哈希函数来加密你的密码，在我的例子中密码是“SecretLog1”

hashCode = s =>
  s.split("").reduce((a, b) => {
    a = (a << 5) - a + b.charCodeAt(0);
    return a & a;
  }, 0);
const password = "SecretLog1";
alert(hashCode(password));
<h1>HASH YOUR PASSWORD</h1>
<p></p>
</body>

</html>

然后你必须得到从哈希返回的值，在密码“SecretLog1”为“541756509”的情况下并将其粘贴到哈希解码函数中，然后你可以创建一个漂亮的页面

window.onload = function() {
  document.getElementById('secretCheckbox').style.display = 'none';

};


function unlock(){
  document.getElementById('factoryAlert').style.display = '';
}

function hideUnlock(){
  document.getElementById('factoryAlert').style.display = 'none';
}


function checkFactoryPwd() {
  var pass = document.getElementById('factoryPwd').value;
  const hashCode = s =>
    s.split('').reduce((a, b) => {
      a = (a << 5) - a + b.charCodeAt(0);
      return a & a;
    }, 0);
  if (hashCode(pass) == '541756509') {
    alert('Welcome!');
    document.getElementById('secretCheckbox').style.display = '';
  } else {
    alert('Sorry, wrong password!');
  }
  return false;
}
<!--    Bootstrap --> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<div class='alert alert-info' role='alert' id='factoryAlert' style="text-align: center;">
              Now you showed this alert, press X to hide it or fill it with right password
              <br>
              <form onsubmit="return checkFactoryPwd()" action='/' method='post' >
              <input type='password' name='factoryPwd' id='factoryPwd'>
              <button type='button' class='btn btn-success btn-sm' onclick='checkFactoryPwd()'>OK</button>
              <button type='button' class='btn btn-danger btn-sm ' onclick='hideUnlock()'>&nbsp;X&nbsp;</button>
            </div>
            
<div class="form-check" id="secretCheckbox">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Secret checkbox
  </label>
  <div style='text-align: center;'><input class='btn btn-primary btn-sm' id='submitCur' type='submit' value='Submit'></div>
 </form>            
</div>

于 2021-08-10T07:42:25.107 回答