显示一个元素当输入值为空时，当输入值不为空时隐藏它。

huangapple
go评论96阅读模式
英文:

Display an element when input value is empty and hide it when input value is not empty

问题

我创建了一个带有绝对定位的段落的输入框。

当输入值为空时，我只想隐藏该元素，当输入值不为空时显示它。

这是我编写的代码，但它不起作用。请问我该怎么办。谢谢。

  1. <input id="searchBtn">
  2. <div class="mypara">mypara</div>
  1. var x = document.getElementById("searchBtn").value;
  3. document.getElementById("searchBtn").addEventListener("focus", myFunction3);
  5. function myFunction3() {
  6.   if (x == "") {
  7.     document.querySelector(".mypara").style.visibility = "visible";
  8.   } else {
  9.     document.querySelector(".mypara").style.visibility = "hidden";
  10.   }
  11. }
英文:

I made an input with a paragraph position absolute to the input element.

I just want to hide the element when the input value is not empty and display it when the input value is empty.

This is the code I wrote but it's not working. What should I do please. Thanks.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var x = document.getElementById(&quot;searchBtn&quot;).value;
  3. document.getElementById(&quot;searchBtn&quot;).addEventListener(&quot;focus&quot;, myFunction3);
  5. function myFunction3() {
  6.   if (x == &quot;&quot;) {
  7.     document.querySelector(&quot;.mypara&quot;).style.visibility = &quot;visible&quot;;
  8.   } else {
  9.     document.querySelector(&quot;.mypara&quot;).style.visibility = &quot;hidden&quot;;
  10.   }
  12. }

<!-- language: lang-html -->

  1. &lt;input id=&quot;searchBtn&quot;&gt;
  2. &lt;div class=&quot;mypara&quot;&gt;mypara&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

你需要输入事件，而不是焦点。

并通过 e.target.value 获取值。

  1. <input id="searchBtn">
  2. <div class="mypara">mypara</div>
  1. document.getElementById("searchBtn").addEventListener("input", myFunction3);
  3. function myFunction3(e) {
  4.   let x = e.target.value
  5.   document.querySelector(".mypara").style.visibility = x === "" ? "visible" : "hidden";
  6. }
英文:

You need input event, not focus.

And get value by e.target.value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. document.getElementById(&quot;searchBtn&quot;).addEventListener(&quot;input&quot;, myFunction3);
  3. function myFunction3(e) {
  4.   let x = e.target.value
  5.   document.querySelector(&quot;.mypara&quot;).style.visibility = x === &quot;&quot; ? &quot;visible&quot; : &quot;hidden&quot;;
  6. }

<!-- language: lang-html -->

  1. &lt;input id=&quot;searchBtn&quot;&gt;
  2. &lt;div class=&quot;mypara&quot;&gt;mypara&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

Just replace focus with keyup so it will always detect when you type. Also put x inside myFunction3 to get an updated value.

替换focus为keyup，这样它将始终在您键入时检测。还将x放入myFunction3以获得更新后的值。

  1. document.getElementById("searchBtn").addEventListener("keyup", function(e) {
  2.   var x = e.target.value;
  3.   document.querySelector(".mypara").style.visibility = x == "" ? "visible" : "hidden";
  4. });
  1. <input id="searchBtn">
  2. <div class="mypara">mypara</div>
英文:

Just replace focus with keyup so it will always detect when you type. Also put x inside myFunction3 to get an updated value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. document.getElementById(&quot;searchBtn&quot;).addEventListener(&quot;keyup&quot;, function(e) {
  2.   var x = e.target.value;
  3.   document.querySelector(&quot;.mypara&quot;).style.visibility = x == &quot;&quot; ? &quot;visible&quot; : &quot;hidden&quot;;
  4. });

<!-- language: lang-html -->

  1. &lt;input id=&quot;searchBtn&quot;&gt;
  2. &lt;div class=&quot;mypara&quot;&gt;mypara&lt;/div&gt;

<!-- end snippet -->

答案3

得分: -1

在事件监听器内部声明 x 变量以便每次更新：

  1. document.getElementById("searchBtn").addEventListener("focus", myFunction3);
  3. function myFunction3() {
  4.   var x = document.getElementById("searchBtn").value;
  5.   if (x == "") {
  6.     document.querySelector(".mypara").style.visibility = "visible";
  7.   } else {
  8.     document.querySelector(".mypara").style.visibility = "hidden";
  9.   }
  10. }
  1. <input id="searchBtn">
  2. <div class="mypara">mypara</div>
英文:

Declare x inside of the event listener to update the variable each time:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. document.getElementById(&quot;searchBtn&quot;).addEventListener(&quot;focus&quot;, myFunction3);
  3. function myFunction3() {
  4.   var x = document.getElementById(&quot;searchBtn&quot;).value;
  5.   if (x == &quot;&quot;) {
  6.     document.querySelector(&quot;.mypara&quot;).style.visibility = &quot;visible&quot;;
  7.   } else {
  8.     document.querySelector(&quot;.mypara&quot;).style.visibility = &quot;hidden&quot;;
  9.   }
  11. }

<!-- language: lang-html -->

  1. &lt;input id=&quot;searchBtn&quot;&gt;
  2. &lt;div class=&quot;mypara&quot;&gt;mypara&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月17日 08:44:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76031021.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定