javascript - 首次单击时如何阻止表单输入注册为无效？

Question

例如，我在表单上输入了一些内容，如果填写正确，我的框阴影会变成绿色，但如果填写不正确，它就会变成红色。目前，只要您单击该框，它就会变成红色，根本没有任何输入。有没有一种方法可以防止它变为红色或绿色，直到在不使用 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/

Answer 1

如果我对您的理解正确，您希望输入仅在用户填写内容然后删除时才显示为无效，而不是在输入第一次获得焦点且为空时显示为无效。

您可以使用一个小的 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
} 

http://jsfiddle.net/27UZs/1/