用密码隐藏一个DIV元素

Question

我有一个DIV元素分为两个表，左右。左边的桌子很好，但是需要隐藏右边桌子，直到用户输入密码或短语，这会打开/解锁该桌子。

这不是安全问题，而是技术性问题之一。我被要求不能直接访问该部分，但添加某种通用密码（无需注册）。

我知道客户端JS对安全性较弱，但在这种情况下安全性不是问题。什么是我最好/最有效的选择？我试过了一个灯箱解决方案，但我无法弄清楚如何在输入正确的短语后显示DIV。

Answer 1

这里是我做过什么：

http://jsfiddle.net/rp40rkpo/3/

#HIDDENDIV { 
 
    display: none; 
 
} 
 

 
#table td { 
 
    padding: 1em; 
 
    border: 1px solid black; 
 
} 
 

 

 
#table.show tr > *:nth-child(2) { 
 
    display: block; 
 
}

<div id="passw"> 
 
      <div> 
 
       (THE PASSWORD IS PASSWORD) <br /> 
 
       Enter the password to proceed: 
 
      </div> 
 
      <div> 
 
      
 
       <input type="password" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" /> <!-- IMPORTANT! this part is so if you click enter, it works. --> 
 
       </div> 
 
      
 

 
      <div> 
 
       <br/> 
 
       <input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') { 
 
document.getElementById('table').classList.toggle('show'); document.getElementById('passw').style.display='none'; } 
 
else { alert('Invalid Password!'); password.setSelectionRange(0, password.value.length); } " /> 
 
      </div> 
 
<!-- it will autoselect wrong input if wrong --> 
 
    <br /><br /><br /> 
 
     </div> 
 

 
<table id="table"> 
 
    <tr> 
 
     <td>stuff</td> 
 
     <td id="HIDDENDIV" >hidden stuff</td> 
 
    </tr> 
 
</table>

警告：这是不是很安全。谁知道如何操作网络检查员将能够查看隐藏的div

我做到了，所以如果你得到一个错误的密码，它会提醒“密码错误”，并选择您的密码，这样你就可以不选择重试它。

此外，密码框隐藏，当你得到它的权利。

希望它有帮助！