javascript - 通过一个输入字段隐藏其他元素

Question

请您为我的 Javascript 代码提供一些简短的帮助。我有一个输入字段，如果 DIV 元素完全为空(没有文本)，它会隐藏该元素:

if (search_value !== "") {
    document.getElementById("frei").className = "frei1";
    }

它完全符合我的要求，主要问题是一旦通过在内部键入激活输入字段，并且当我开始删除文本直到输入为空时，即使输入不包含文本，我的隐藏 DIV 也会出现(因为我把它删除了)。此功能仅在首页加载时有效，而当我在输入中键入任何内容并将其删除时，我的 JavaScript 代码将不起作用。

请您给我一个建议，它看起来像Javasript代码，每次输入字段不包含文本时都会隐藏该DIV？即使文本被手动删除？

非常感谢您，并对此类问题表示歉意。我的基本 Javascript 能力不强。

Answer 1

该代码只会在页面加载时执行，但您希望它在每次有人输入您的输入时运行，为此，您可以使用 onkeyup 事件:

document.getElementById("yourInput").onkeyup = function () {
    if (this.value !== "") {
        document.getElementById("frei").className = "frei1";
    }
    else {
        document.getElementById("frei").className = "";
    }
};

DEMO

如果您还需要它在页面加载时运行，请将其提取到一个函数中，然后您也可以在页面加载时调用该函数:

function setDisplay() {
    if (document.getElementById("yourInput").value !== "") {
        document.getElementById("frei").className = "frei1";
    }
    else {
        document.getElementById("frei").className = "";
    }
}

然后在页面加载时调用它:

setDisplay();

然后将其附加到 onkeyup 事件，就像我们在第一个实例中所做的那样:

document.getElementById("yourInput").onkeyup = setDisplay;