使用 CSS 检测输入中的字符答案

【问题标题】：Detect character in input using CSS使用 CSS 检测输入中的字符
【发布时间】：2017-10-02 20:54:51
【问题描述】：

我正在尝试仅使用 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>

【问题讨论】：

重复HTML5 input pattern search for quote - 将您的模式更改为pattern="[^'\x22]+"
我将模式更改为建议，但它仍然没有改变，基于价值。
@Santi 仍然无法正常工作，我在值的末尾添加了一个引号，因此您可以看到新模式仍然没有返回无效。
您不能在 HTML 属性中添加双引号。这是无效的。 value 属性以第二个引号结束，并认为您的额外 " 只是一个错误。 It works fine.
@Santi 好吧，我了解以第二个引号结尾，但是您的示例删除了我需要的值，并且文本将动态放入其中。

标签： html css

【解决方案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 存在。

【讨论】：