Javascript 使用JS的HTML标记占位符

对于以下HTML输入标记：

<input id="search_bar" type="text" placeholder="search...">

---

但是，当单击“外部输入标记的其他位置”时，我无法恢复更改。如何替换原来的占位符值“search…”与以前一样？？？

使用

blur

事件

另外，我的解决方案只查询DOM一次，如果在字段中使用tab键，则处理

焦点

事件而不是

单击

也会隐藏占位符：

var txt = document.getElementById("search_bar")
txt.addEventListener("focus", function(){
        this.placeholder = "";
});
txt.addEventListener("blur", function(){
        this.placeholder = "search...";
});

---

就我个人而言，我只想为“模糊事件”添加另一个事件侦听器，如下所示：

document.getElementById（“搜索栏”）.addEventListener（“单击”，函数（）{
document.getElementById（“搜索栏”）.placeholder=“”；
});
document.getElementById（“搜索栏”）.addEventListener（“模糊”，函数（）{
document.getElementById（“搜索栏”）.placeholder=“搜索…”；
});

---

当我在一个代码笔中尝试它时，这对我来说是个好办法。

将事件从单击更改为焦点

document.getElementById("search_bar").addEventListener("focus", function(){
            document.getElementById("search_bar").placeholder = "";
    });

然后将其设置回模糊事件

document.getElementById("search_bar").addEventListener("blur", function(){
            document.getElementById("search_bar").placeholder = "Search...";
    });

---

但是，我不认为这是必要的，因为默认情况下，当用户开始键入document.getElementById（“搜索栏”）的内容之前的

存储时，占位符会被删除。占位符例如在变量中并还原，如果输入值仍然为空，您可以使用

.focusout（）

方法再次设置占位符。有。。。实际上没有理由这么做。您正在重新创建默认行为。

document.getElementById("search_bar").addEventListener("focus", function(){
            document.getElementById("search_bar").placeholder = "";
    });

document.getElementById("search_bar").addEventListener("blur", function(){
            document.getElementById("search_bar").placeholder = "Search...";
    });