web端表单信息全部填满后让提交按钮变色
时间: 2023-08-16 20:05:07 浏览: 62
可以使用 JavaScript 监听表单输入的变化,当表单全部填满后,使用 CSS 改变提交按钮的样式。以下是一个简单的实现示例:
HTML:
```html
<form>
<label>
Name:
<input type="text" name="name" required>
</label>
<label>
Email:
<input type="email" name="email" required>
</label>
<button type="submit" id="submitBtn">Submit</button>
</form>
```
CSS:
```css
#submitBtn {
background-color: gray;
color: white;
}
#submitBtn.enabled {
background-color: green;
}
```
JavaScript:
```javascript
const form = document.querySelector('form');
const submitBtn = document.querySelector('#submitBtn');
form.addEventListener('input', () => {
// 检查表单是否全部填满
const isFormFilled = Array.from(form.elements).every((element) => {
return element.checkValidity();
});
// 改变提交按钮样式
if (isFormFilled) {
submitBtn.classList.add('enabled');
} else {
submitBtn.classList.remove('enabled');
}
});
```
这段代码会监听表单的 `input` 事件,每次输入发生变化时检查表单是否全部填满,如果是则给提交按钮添加 `enabled` 类,改变它的样式。