输入密码显示div内容

Question

我想输入单词PASSWORD 并显示HIDDENDIV 中的内容。

谁能告诉我哪里出错了？

#HIDDENDIV {
    display: none;
}

<input type="text" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" />
        <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 id="HIDDENDIV">bla</div>

Answer 1

因为您通过基于 id 的 CSS 选择器隐藏了内容，所以稍后向其添加“显示”CSS 类不会覆盖您已经设置的 id 规则。（阅读this 了解不同的 CSS 选择器如何比其他选择器更具体，因此更难以覆盖。）

这是一个简单的例子：

#d1 { display:none; }    /* Will override most other selectors */
div { display:block; }   /* Won't work */
.show { display:block; } /* Won't work */

<p>You aren't going to see the div below this paragraph even though it matches two selectors that indicate that it should be shown and even though those two selectors come after the one that hides it. This is because the way it's being hidden is with an id based selector and tag type and class selectors alone are less specific than an id selector and won't override it.</p>
<div id="d1" class="show">Hello?!</div>

因此，首先，使用 CSS 类而不是基于 id 的选择器将内容设置为隐藏，然后，您可以删除该类 - 不需要额外的“显示”类。

接下来，在您的代码中，您有一个 div 和一个 HIDDENDIV 的 id，但是您的代码尝试获取并显示一个带有 id 的 table 的元素。我假设这只是发布此问题时的一个错字，实际上，您确实需要一个表格来显示，但您需要更正它。

此外，您不应该使用 HTML 内联事件属性。这是 20 多年前我们在制定标准之前进行事件处理的方式，不幸的是，这种技术如此普遍，以至于它不会死于应得的死亡。 There are a variety of reasons not to use them. 相反，请使用现代标准和最佳实践，并在单独的 JavaScript 中完成所有事件处理。

您还需要在尝试选择密码字段中的所有文本之前添加额外的一行以使该元素成为焦点，否则选择代码将不起作用（请参阅下面的代码）。

// Get references to the elements you'll be working with
var input = document.getElementById("password");
var div = document.getElementById("HIDDENDIV");
var btn = document.getElementById("button");

// Set up event handlers in JavaScript
button.addEventListener("click", validate);

function validate(){
  if (input.value == 'PASSWORD') { 
     // No need to add a "show" class. Just remove the "hidden" class.
     div.classList.remove('hidden');
     
     // Or, add it:
     input.classList.add("hidden");
  } else {  
     password.focus(); // <-- If you don't do this first, your select code won't work
     password.setSelectionRange(0, password.value.length);   
     alert('Invalid Password!'); 
  }
}

input.addEventListener("keydown", function(event){
 if (event.keyCode === 13){
   // No reason to simulate a button click. Just call the code that needs to be run.
   validate();
 }
});

/* You only need to apply this to elements that should be hidden and
   then simply remove this class from hidden elements to show them. */
.hidden { display: none; }

<input type="text" id="password">
<br>
<input id="button" type="button" value="Login">
<div id="HIDDENDIV" class="hidden">bla</div>

注意事项：

• 请记住，尽管此代码可以“工作”，任何人都可以击败 只需查看您的源代码，此代码就很容易。到 真正保护内容不被正确使用 提供凭据，您需要实现服务器端 解决方案。
• 就像内联脚本不应该再做一样，同样可以 表示使用 XHTML 自终止标记语法（即<br />， <input />)。这也是一种不会消失的旧语法。 Here's why you don't need and shouldn't use this syntax.

Answer 2

我修改并清理了您的代码以使用此工作 sn-p：
（代码中见我的cmets）

// Scripts belongs in tag scripts or in separate files, inline scripts shouldn't be that long.
function verify() { // I created the function, which is called onclick on the button
  if (document.getElementById('password').value === 'PASSWORD') {
    document.getElementById('HIDDENDIV').classList.remove("hidden"); // Using class instead of inline CSS
    document.getElementById('credentials').classList.add("hidden"); // Hide the div containing the credentials
  } else {
    alert('Invalid Password!');
    password.setSelectionRange(0, password.value.length);
  }
  return false;
}

.hidden { /* Changed id selector to a class */
  display: none;
}

<div id="credentials">
  <!-- Added the parent div to be able to hide both the password, the button and even the <br> tag easily -->
  <input type="text" id="password" onkeydown="if (event.keyCode == 13) verify()" />
  <br/>
  <input id="button" type="button" value="Login" onclick="verify()" />
</div>
<div id="HIDDENDIV" class="hidden">bla</div><!-- Added class -->

请注意，这不是保护任何东西的方法。
只需在任何浏览器上打开代码查看器，您就会看到“隐藏的”div。

Answer 3

改变了

document.getElementById('table').classList.toggle('show')

到

document.getElementById('HIDDENDIV').style.display = 'block';

看起来你有很多不必要的代码

<input type="text" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" />
        <br/>
        <input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') { 
document.getElementById('HIDDENDIV').style.display = 'block';   document.getElementById('passw').style.display='none'; } 
else {  alert('Invalid Password!'); password.setSelectionRange(0, password.value.length);   } " />

<div id="HIDDENDIV">bla</div>