如果標簽為空，則在取消選擇時設置所需的輸入標簽的樣式

Question

我有一個可能看起來像的輸入標簽

<input required pattern="..." >

如果該標簽為空或該字段與模式不匹配，但僅當該字段已被訪問時，我想以不同的方式設置此標簽的樣式（邊框周圍為紅色）。

---

1. 如果我打開包含表單的頁面，我希望所有字段的樣式都正常。

2. 如果我點擊一個必填字段，然后

   • 按標簽
   • 單擊另一個字段
   • 或提交表格

   而該字段是

   • 還是空的
   • 或填充無效輸入，或單擊另一個字段

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

---

我知道:required和:invalid偽類標簽，但我不知道如何將其限制為僅已訪問過的字段，因為:visited標簽僅適用於鏈接

Answer 1

您可以為每個輸入添加一個焦點事件偵聽器，添加一個您可以在 :invalid 時設置樣式的類。 這樣，除非存在“已成為焦點”類，否則永遠不會應用無效樣式。

 const inputEmail = 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'); });

 input { outline: none; } .has-been-focused:invalid { border: 5px solid red; }

 <input id="email" placeholder="Email" type="email" required /> <input id="number" placeholder="Number" type="number" required />