表单未填写时禁用提交按钮并更改按钮的CSS是一种常见的前端开发技术,可以通过以下步骤实现:
<form>
<input type="text" id="name" placeholder="姓名">
<input type="email" id="email" placeholder="邮箱">
<button type="submit" id="submit-btn">提交</button>
</form>
#submit-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#submit-btn:disabled {
background-color: gray;
cursor: not-allowed;
}
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const submitBtn = document.getElementById('submit-btn');
function checkForm() {
if (nameInput.value !== '' && emailInput.value !== '') {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
}
nameInput.addEventListener('input', checkForm);
emailInput.addEventListener('input', checkForm);
上述代码中,通过监听输入框的输入事件,每当输入框的内容发生变化时,调用checkForm()
函数来检查表单是否填写完整。如果姓名和邮箱都有值,则启用提交按钮,否则禁用提交按钮。
这种技术可以应用于各种表单场景,例如注册表单、登录表单等。通过禁用提交按钮,可以防止用户在表单未填写完整时误操作提交,提高用户体验和数据的准确性。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。
领取专属 10元无门槛券
手把手带您无忧上云