我有一个 DIV 元素分成左右两个表。左表很好,但右表需要隐藏,直到用户输入密码或短语,这将打开/解锁该表。
这不是安全问题,而是技术问题。我被要求不要直接访问该部分,而是添加某种通用密码(无需注册)。
我知道客户端 JS 的安全性很弱,但在这种情况下,安全性不是问题。我最好/最有效的选择是什么?我尝试了一个灯箱解决方案,但是一旦输入了正确的短语,我就无法弄清楚如何显示 DIV。
我有一个 DIV 元素分成左右两个表。左表很好,但右表需要隐藏,直到用户输入密码或短语,这将打开/解锁该表。
这不是安全问题,而是技术问题。我被要求不要直接访问该部分,而是添加某种通用密码(无需注册)。
我知道客户端 JS 的安全性很弱,但在这种情况下,安全性不是问题。我最好/最有效的选择是什么?我尝试了一个灯箱解决方案,但是一旦输入了正确的短语,我就无法弄清楚如何显示 DIV。
这是我所做的:
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 检查器的人都可以查看隐藏的 div
我这样做是为了如果您输入错误的密码,它会提示“密码无效”并选择您的密码,这样您就可以在不选择密码的情况下重试。
此外,密码框会在您输入正确时隐藏。
希望能帮助到你!