例如,我在表单上输入了一些内容,如果填写正确,我的框阴影会变成绿色,但如果填写不正确,它就会变成红色。目前,只要您单击该框,它就会变成红色,根本没有任何输入。有没有一种方法可以防止它变为红色或绿色,直到在不使用 js 的情况下实际输入了某些内容?
除了 :focus 或 :valid 之外,还有其他东西可以在这里使用吗?
CSS
#contactform input:focus:invalid, #contactform textarea:focus:invalid {
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
#contactform input:required:valid, #contactform textarea:required:valid {
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
编辑:示例: http://jsfiddle.net/27UZs/
最佳答案
如果我对您的理解正确,您希望输入仅在用户填写内容然后删除时才显示为无效,而不是在输入第一次获得焦点且为空时显示为无效。
您可以使用一个小的 JavaScript 来执行此操作。当用户开始输入时,它将删除未填充的类。
HTML
<input type="text" class="unfilled" name="name" id="username" placeholder="Rob James" value="" required>
JS
var no1 = document.getElementById("username");
no1.addEventListener("keyup", function() {
if(this.value.length > 0) {
this.className = "";
}
}, false);
CSS
#contactform input:not(.unfilled):focus:invalid {
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
关于javascript - 首次单击时如何阻止表单输入注册为无效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24156140/