点击时改变placechilder字体颜色
时间: 2023-07-04 07:20:55 浏览: 50
可以使用JavaScript来实现点击时改变placeholder字体颜色的效果。以下是一个简单的示例代码:
```html
<input type="text" id="myInput" placeholder="请输入内容">
<script>
var input = document.getElementById("myInput");
input.addEventListener("focus", function() {
input.style.color = "red";
});
input.addEventListener("blur", function() {
input.style.color = "";
});
</script>
```
这段代码中,我们首先获取到了`<input>`元素,并给它添加了两个事件监听器。当输入框获得焦点时(即被点击选中),我们将其placeholder的文字颜色设为红色。当输入框失去焦点时(即被点击以外的地方选中),我们将其placeholder的文字颜色设为默认颜色(即空字符串)。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)