这个按钮用input标签
时间: 2024-03-20 12:44:58 浏览: 188
好的,那我们可以将按钮改为使用`<input>`标签实现,代码如下:
HTML代码:
```html
<label>密码:</label>
<input type="password" id="password">
<br>
<label>确认密码:</label>
<input type="password" id="confirmPassword">
<span id="error"></span>
<br>
<input type="submit" id="submit" value="提交" disabled>
```
CSS代码:
```css
#error {
color: red;
font-size: 12px;
display: none;
}
#submit[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
```
JavaScript代码:
```javascript
var password = document.getElementById("password");
var confirmPassword = document.getElementById("confirmPassword");
var error = document.getElementById("error");
var submit = document.getElementById("submit");
confirmPassword.addEventListener("blur", function () {
if (password.value !== confirmPassword.value) {
error.innerHTML = "两次输入的密码不相同";
error.style.display = "inline";
submit.disabled = true;
} else {
error.style.display = "none";
submit.disabled = false;
}
});
```
在上述代码中,我们将按钮改为`<input>`标签,并且将其类型设置为`submit`,这样就可以实现提交功能了。其他部分的代码和之前一样。
阅读全文