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

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

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

问题

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

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

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

<input id="searchBtn">
<div class="mypara">mypara</div>
var x = document.getElementById("searchBtn").value;

document.getElementById("searchBtn").addEventListener("focus", myFunction3);

function myFunction3() {
  if (x == "") {
    document.querySelector(".mypara").style.visibility = "visible";
  } else {
    document.querySelector(".mypara").style.visibility = "hidden";
  }
}
英文:

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 -->

var x = document.getElementById(&quot;searchBtn&quot;).value;

document.getElementById(&quot;searchBtn&quot;).addEventListener(&quot;focus&quot;, myFunction3);

function myFunction3() {
  if (x == &quot;&quot;) {
    document.querySelector(&quot;.mypara&quot;).style.visibility = &quot;visible&quot;;
  } else {
    document.querySelector(&quot;.mypara&quot;).style.visibility = &quot;hidden&quot;;
  }

}

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

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

<!-- end snippet -->

答案1

得分: 2

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

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

<input id="searchBtn">
<div class="mypara">mypara</div>
document.getElementById("searchBtn").addEventListener("input", myFunction3);

function myFunction3(e) {
  let x = e.target.value
  document.querySelector(".mypara").style.visibility = x === "" ? "visible" : "hidden";
}
英文:

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 -->

document.getElementById(&quot;searchBtn&quot;).addEventListener(&quot;input&quot;, myFunction3);

function myFunction3(e) {
  let x = e.target.value
  document.querySelector(&quot;.mypara&quot;).style.visibility = x === &quot;&quot; ? &quot;visible&quot; : &quot;hidden&quot;;
}

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

&lt;input id=&quot;searchBtn&quot;&gt;
&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.

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

document.getElementById("searchBtn").addEventListener("keyup", function(e) {
  var x = e.target.value;
  document.querySelector(".mypara").style.visibility = x == "" ? "visible" : "hidden";
});
<input id="searchBtn">
<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 -->

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

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

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

<!-- end snippet -->

答案3

得分: -1

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

document.getElementById("searchBtn").addEventListener("focus", myFunction3);

function myFunction3() {
  var x = document.getElementById("searchBtn").value;
  if (x == "") {
    document.querySelector(".mypara").style.visibility = "visible";
  } else {
    document.querySelector(".mypara").style.visibility = "hidden";
  }
}
<input id="searchBtn">
<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 -->

document.getElementById(&quot;searchBtn&quot;).addEventListener(&quot;focus&quot;, myFunction3);

function myFunction3() {
  var x = document.getElementById(&quot;searchBtn&quot;).value;
  if (x == &quot;&quot;) {
    document.querySelector(&quot;.mypara&quot;).style.visibility = &quot;visible&quot;;
  } else {
    document.querySelector(&quot;.mypara&quot;).style.visibility = &quot;hidden&quot;;
  }

}

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

&lt;input id=&quot;searchBtn&quot;&gt;
&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
匿名

发表评论

匿名网友

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

确定