当用户开始使用 JavaScript 输入时如何显示隐藏元素？

方法 1：使用 oninput 属性输入元素：每当用户开始输入输入元素时，都会触发oninput属性。这可用于检测或元素的变化。使用此属性的值调用函数。</p><p>此函数选择隐藏元素并将其显示属性更改为“块”。这将取消隐藏元素，前提是使用“无”显示属性隐藏元素。在此函数中可以使用其他显示元素的方法。</p><p>因此，每当用户开始在输入框中输入内容时，都会触发该函数并显示隐藏元素。</p><p><strong>句法：</strong> </p><div class="noIdeBtnDiv"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><input oninput="showElem()"></input> function showElem() { document.querySelector('.box').style.display = "block"; } </code></pre></div></div><p><strong>例子：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><!DOCTYPE html> <html> <head> <title> How to display hidden element when a user starts typing using JavaScript ? </title> <style> .box { height: 50px; width: 300px; background-color: lightgreen; /* hide the element by default */ display: none; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> JavaScript code to show hidden element when a user starts typing </b> <p> Start typing in the input box below to unhide the message </p> <input oninput="showElem()"></input> <div class="box"> You have started typing in the input box </div> <script type="text/javascript"> function showElem() { document.querySelector('.box').style.display = "block"; } </script> </body> </html> </code></pre></div><p><strong>输出：</strong></p><ul><li><strong>打字前：</strong> <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_display_hidden_element_when_a_user_starts_typing_using_JavaScript_?_0.png" alt="输入前输入" class="aligncenter size-full wp-image-1254264"></li><li><strong>打字后：</strong> <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_display_hidden_element_when_a_user_starts_typing_using_JavaScript_?_1.png" alt="输入后输入" class="aligncenter size-full wp-image-1254263"></li></ul><p><strong>方法二：向输入框添加事件监听器：</strong> <strong>addEventListener()</strong>方法用于向任意元素添加事件处理程序。每当目标元素发生指定的事件时，就会执行指定的函数。</p><p><strong>输入</strong>事件与此方法一起使用。只要在 <input> 或 <textarea> 元素中检测到更改，就会触发此事件。</p><p>首先选择并存储用户将键入的输入。然后在此输入框上调用 addEventListener() 方法。然后在方法内部创建一个新函数。</p><p>此函数选择隐藏元素并将其显示属性更改为“块”。这将取消隐藏元素，前提是该元素被“无”显示属性隐藏。在此函数中可以使用其他显示元素的方法。</p><p>因此，每当用户开始在输入框中输入内容时，都会触发该函数并显示隐藏元素。</p><p><strong>句法：</strong> </p><div class="noIdeBtnDiv"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">let inputBox = document.querySelector('.inputBox') inputBox.addEventListener('input', function() { document.querySelector('.box').style.display = "block"; }); </code></pre></div></div><p><strong>例子：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><!DOCTYPE html> <html> <head> <title> How to display hidden element when a user starts typing using JavaScript ? </title> <style> .box { height: 50px; width: 300px; background-color: lightgreen; /* hide the element by default */ display: none; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> JavaScript code to show hidden element when a user starts typing </b> <p> Start typing in the input box below to unhide the message </p> <input class="inputBox"></input> <div class="box"> You have started typing in the input box </div> <script type="text/javascript"> let inputBox = document.querySelector('.inputBox') inputBox.addEventListener('input', function() { document.querySelector('.box').style.display = "block"; }); </script> </body> </html> </code></pre></div><p><strong>输出：</strong></p><ul><li><strong>打字前：</strong> <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_display_hidden_element_when_a_user_starts_typing_using_JavaScript_?_2.png" alt="eventlistener-before-typeing" class="aligncenter size-full wp-image-1254262"></li><li><strong>打字后：</strong> <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_display_hidden_element_when_a_user_starts_typing_using_JavaScript_?_3.png" alt="eventlistener-after-types" class="aligncenter size-full wp-image-1254261"></li></ul><br></div></article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer>  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script>  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>