当文本输入具有模式匹配时切换 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>