Html 如果标记为空，则在“取消选择”上设置所需输入标记的样式

我有一个输入标签，可能看起来像

<input required pattern="..." >

如果此标记为空或字段与模式不匹配，我希望使用不同的样式（边框周围为红色），但仅当字段已被访问时

---

如果我打开包含表单的页面，我希望所有字段的样式都正常

如果我点击一个必填字段，然后

• 按tab键
• 单击另一个字段
• 或提交表格

而这个领域

• 还空着
• 或填充无效输入，或单击其他字段

然后希望此字段的样式不同

---

---

我知道

：required

和

：invalid

伪类标记，但我不知道如何将其限制为仅已访问的字段，因为

：visted

标记仅适用于链接

您可以为每个输入添加一个焦点事件侦听器，该类可以在：invalid时设置样式。这样，除非存在“已聚焦”类，否则将永远不会应用无效样式

constinputemail=document.getElementById（'email'）；
const inputNumber=document.getElementById（'number'）；
inputEmail.addEventListener（'focus'，（）=>{
inputEmail.classList.add（'has-been-focused'）；
});
inputNumber.addEventListener（'focus'，（）=>{
inputNumber.classList.add（'has-been-focused'）；
});
输入{
大纲：无；
}
。已聚焦：无效{
边框：5px纯红；
}

@Spectric什么意思图案不起作用？对不起。我以为那是一个日期输入。我的道歉：）