html - 使用 CSS 检测输入中的字符

Question

我正在尝试仅使用 CSS 检测输入中何时包含双引号 ("):当无效时，即其中包含字符，它应该显示消息。注意:输入值是动态放置在我的编辑界面中的。

form div#intdblquote > input[type="text"]:valid {
  display: none;
  position: relative}

form div#intdblquote > input[type="text"]:valid ~ .requirements {
  display: none}
  
form div#intdblquote > input[type="text"]:invalid {
  display: block}
  
form div#intdblquote > input[type="text"]:invalid ~ .requirements {
  display: block} 

<form>
  <div id="intdblquote">
   <input type="text" id="intdblquote" name="intdblquote" pattern="[^'\x22]+" placeholder= " " value="MyEntry""  required />
   <div class="requirements">Must not contain double quote.</div>
  </div>
</form>

Answer 1

也许我没弄对，但我想一切都差不多了。你可能搞砸了风格和转义。这似乎有效:当输入 " 符号时会显示警告。如果您希望默认值为 MyEntry"，请将属性包含在 '.

form div#intdblquote > input[type="text"]:valid ~ .requirements {
  display: none;
}
  
form div#intdblquote > input[type="text"]:invalid ~ .requirements {
  display: block;
} 

<form>
  <div id="intdblquote">
   <input type="text" id="intdblquote" name="intdblquote" pattern="[^\x22]+" placeholder="" value='MyEntry"' required/>
   <div class="requirements">Required. Must not contain double quote.</div>
  </div>
</form>

pattern 属性指定用于检查元素值的正则表达式。当正则表达式不满足时，:invalid 伪类接管。否则 :valid 开始发挥作用。

另请注意，如果 中未输入任何内容:invalid 伪类生效，因为属性 required 存在。