当输入域失去焦点 (blur) 时改变其颜色
时间: 2023-08-21 12:01:55 浏览: 56
您可以使用 JavaScript 和 CSS 来实现这个效果。
首先,在 HTML 中给需要改变颜色的输入框添加一个 class 属性,如下所示:
```html
<input type="text" class="color-change" />
```
然后,在 CSS 中为该 class 添加样式:
```css
.color-change {
border: 1px solid #999;
}
.color-change:focus {
border-color: blue;
}
```
这段 CSS 代码的意思是,为所有带有 `color-change` class 的输入框添加一个灰色边框,当输入框获得焦点时,将边框颜色改为蓝色。
最后,使用 JavaScript 监听输入框的失去焦点事件,并为其添加/移除 `focus` class,如下所示:
```js
const input = document.querySelector('.color-change');
input.addEventListener('blur', () => {
input.classList.remove('focus');
});
input.addEventListener('focus', () => {
input.classList.add('focus');
});
```
这段 JavaScript 代码的意思是,当输入框失去焦点时,移除 `focus` class,当输入框获得焦点时,添加 `focus` class。这样,CSS 中的样式就会生效,从而改变输入框的颜色。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)