用js代码写 点击搜索框 默认文本消失
时间: 2023-08-18 09:06:58 浏览: 57
你可以使用 JavaScript 和 HTML 来实现这个功能。下面是一个简单的示例:
HTML 代码:
```html
<input type="text" id="search" value="搜索...">
```
JavaScript 代码:
```javascript
var searchBox = document.getElementById("search");
searchBox.addEventListener("click", function () {
if (searchBox.value === "搜索...") {
searchBox.value = "";
}
});
```
这段代码将监听搜索框的点击事件,当点击搜索框时,如果搜索框中的文本为默认文本“搜索...”,则将其清空。
相关问题
用js代码写 点击搜索框 默认文本消失 不要写监听
可以使用 `placeholder` 属性来实现。在搜索框的 `input` 标签中设置 `placeholder` 属性即可。
示例代码如下:
```html
<input type="text" placeholder="请输入搜索内容">
```
当点击搜索框时,`placeholder` 中的默认文本会自动消失。
用js代码写 点击搜索框 默认文本消失 鼠标移开默认文本显示
可以使用以下代码实现:
HTML:
```
<input type="text" id="searchBox" value="搜索">
```
JavaScript:
```
var searchBox = document.getElementById("searchBox");
searchBox.addEventListener("focus", function() {
if (searchBox.value == "搜索") {
searchBox.value = "";
}
});
searchBox.addEventListener("blur", function() {
if (searchBox.value == "") {
searchBox.value = "搜索";
}
});
```
以上代码中,我们首先获取了 ID 为 "searchBox" 的 input 元素,然后分别为其添加了 focus 和 blur 事件监听器。当焦点移至搜索框时,如果搜索框中的值为默认文本 "搜索",则将其清空;当焦点移开搜索框时,如果搜索框中的值为空,则将其重置为默认文本 "搜索"。