我试图找到一种方法来检测输入当前是否显示占位符。
我知道我们可以测试占位符在给定的浏览器中是否受支持,我会使用它,但这不是我在这里问的问题。:placeholder-shown
伪类做的正是我所需要的,但是对它的支持非常低,比对占位符的支持要低得多,所以我在寻找一个替代方法。
注意:解决方案不能依赖于输入是否已更改或获得值。自动填充的输入既没有技术值,也没有更改。因此解决方案需要真正自己检测占位符。
我试图找到一种方法来检测输入当前是否显示占位符。
我知道我们可以测试占位符在给定的浏览器中是否受支持,我会使用它,但这不是我在这里问的问题。:placeholder-shown
伪类做的正是我所需要的,但是对它的支持非常低,比对占位符的支持要低得多,所以我在寻找一个替代方法。
注意:解决方案不能依赖于输入是否已更改或获得值。自动填充的输入既没有技术值,也没有更改。因此解决方案需要真正自己检测占位符。
4条答案
按热度按时间gstyhher1#
首先,检查元素是否正在使用
placeholder
属性,然后检查input的值是否为空:puruo6ea2#
现在,对于大多数浏览器,我们可以使用
:placeholder-shown
伪类来检测占位符是否显示。CSS技巧:https://css-tricks.com/almanac/selectors/p/placeholder-shown/
可使用网址:www.example.comhttps://caniuse.com/#feat=css-placeholder-shown
flseospp3#
将
required
属性添加到输入,然后使用:invalid
选择显示占位符的输入。这不适用于电子邮件或带有模式属性的输入类型。
如果希望js在所有情况下都能正常工作,使用js仍然是最好的选择。
yx2lnoni4#