用密碼隱藏一個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

我做到了，所以如果你得到一個錯誤的密碼，它會提醒「密碼錯誤」，並選擇您的密碼，這樣你就可以不選擇重試它。

此外，密碼框隱藏，當你得到它的權利。

希望它有幫助！