CSS 可以在没有 JavaScript 的情况下检测外部页面中的文本输入吗？

在不可控的外部页面中使用 CSS 检测文本输入

为了确定输入字段是否仅通过 CSS 包含文本，请考虑使用占位符属性。占位符是必要的且不能为空，但可以设置为单个空格。

应用 CSS 规则：

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

演示：

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

在此示例中，输入带有占位符且没有文本将有一个绿色边框，表明它是空的。相反，带有占位符和文本或仅包含空格的占位符和值的输入将具有红色边框。

附加说明：

• 此方法之所以有效，是因为 :placeholder-shown 是一个伪类，它与显示的元素相匹配placeholder.
• :placeholder-shown 在所有主流浏览器中均受支持。

以上是CSS 可以在没有 JavaScript 的情况下检测外部页面中的文本输入吗？的详细内容。更多信息请关注PHP中文网其他相关文章！