javascript 如果输入有值，则隐藏/显示元素

ctehm74n 于 2023-02-15 发布在 Java

关注(0)|答案(2)|浏览(119)

我想根据输入字段是否有值来隐藏或显示一个元素。现在我有了这个，但这里的问题是，每次按下一个键时，如果值不为空，它都会添加visible类。这是不正确的，将导致许多问题。
是否有一个内置的JavaScript事件可以用来检查元素是否为空？用最少的资源做这件事的最好方法是什么？

const query_input = document.getElementsByClassName("query")[0];

query_input.addEventListener('input', event => {

    if (query_input.value == ""){

        document.getElementsByClassName("submit")[0].classList.add("hidden");

        console.log ("empty");
    }else{
        console.log ("not empty");

        document.getElementsByClassName("submit")[0].classList.add("visible");
    }

});

JavaScript

来源：https://stackoverflow.com/questions/75443578/hide-show-element-if-input-has-value

2条答案

按热度按时间

4ioopgfo1#

我认为没有这种内在的东西 *

你可以做一些改进：

const query_input = document.querySelector(".query");
let btn = document.querySelector(".submit");
query_input.addEventListener('input', event => {
  if (query_input.value.trim() == ""){
    btn.classList.remove("visible");//remove
    btn.classList.add("hidden");    //add
    console.log ("empty");
  }else{
    console.log ("not empty");
    btn.classList.remove("hidden"); //remove
    btn.classList.add("visible");   //add
  }

});

赞(0）回复(0）举报 2023-02-15

slsn1g292#

const query_input = document.getElementsByClassName("query")[0];

query_input.addEventListener('blur', event => {
    if (query_input.value == ""){
        document.getElementsByClassName("submit")[0].classList.add("hidden");
        console.log ("empty");
    } else {
        console.log ("not empty");
        document.getElementsByClassName("submit")[0].classList.add("visible");
    }
});

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 如果输入有值，则隐藏/显示元素

2条答案

相关问题

热门标签

最新问答