jquery - 使用密码隐藏 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>

警告:这不是很安全。任何知道如何操作 Web Inspector 的人都可以查看隐藏的 div

我这样做是为了如果您输入错误的密码，它会发出“无效密码”警报并选择您的密码，以便您可以在不选择密码的情况下重试。

此外，当您输入正确时，密码框会隐藏。

希望对你有帮助!