输入密码即可显示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

由于您通过基于 CSS 选择器隐藏了内容id，因此稍后向其中添加“显示”CSS 类不会覆盖id您已设置的规则。（读这个了解不同的 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 类而不是 CSS 类将内容设置为隐藏id基于选择器将内容设置为隐藏，然后，您可以删除该类 - 不需要额外的“显示”类。

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

另外，您不应该使用 HTML 内联事件属性。这就是 20 多年前我们在制定标准之前处理事件的方式，不幸的是，这种技术如此普遍，以至于它不会像它应有的那样消亡。不使用它们的原因有多种。相反，使用现代标准和最佳实践，并在单独的 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>

笔记：

• 请记住，虽然此代码可以“工作”，但任何人都可以很容易地击败此代码任何人都可以通过查看源代码为了真正保护内容在没有提供正确凭据的情况下不被使用，您需要实施服务器端解决方案。
• <br />就像不应再进行内联脚本一样，使用 XHTML 自终止标记语法（即, ）也是如此<input />。这也是一种不会消失的旧语法。 这就是为什么您不需要也不应该使用此语法的原因。