我试图找到一种方法来检测输入当前是否显示占位符。
我知道我们可以测试给定的浏览器是否支持占位符,但是我在这里不是要问的。
:placeholder-shown
伪类完全满足我的需要,但是对此的支持非常低。大大低于对占位符的总体支持。所以我正在寻找一种替代方法。
注意:解决方案不能依赖于输入是否已更改或获得值。自动填充的输入既无技术值(value),也无变化。因此,解决方案需要真正检测到自身的占位符。
最佳答案
首先,检查元素是否正在使用placeholder
属性,然后检查输入的值是否为空:
function placeholderActive(selector) {
var el = document.querySelector(selector);
if (el.getAttribute('placeholder') && el.value === '') {
return true;
}
return false;
}
var a = placeholderActive('#test1'); // false
var b = placeholderActive('#test2'); // false
var c = placeholderActive('#test3'); // false
var d = placeholderActive('#test4'); // true
console.log(a, b, c, d);
<input id="test1" name="test1" value="123">
<input id="test2" name="test2" placeholder="" value="123">
<input id="test3" name="test3" placeholder="Some Placeholder" value="123">
<input id="test4" name="test4" placeholder="Another placeholder" value="">