當文本輸入具有模式匹配時切換 div

Question

當有人在文本字段中輸入正確答案時，我試圖顯示一個 div。 當字段無效時，我使用 CSS 偽選擇器隱藏 div，但空字段計為有效，它在輸入任何內容之前顯示 div。

input:invalid + #next {
  display:none;
}

input:valid + #next {
  display:block;
}

<form>
  <input type="text" maxlength="4" pattern="1234">
  <div id="next">SUCCESS</div>
</form>

Answer 1

在這里，您只需要添加required屬性，以便在驗證輸入之前需要一些值

 input:invalid + #next { display:none; } input:valid + #next { display:block; }

 <form> <input type="text" maxlength="4" pattern="1234" required> <div id="next">SUCCESS</div> </form>