检测输入占位符是否可见

Question

我正在尝试找到一种方法来检测输入当前是否显示占位符。

我知道我们可以测试给定浏览器是否支持占位符，我会使用它，但这不是我在这里要问的。

伪:placeholder-shown类正是我所需要的，但对它的支持非常低。一般来说，对占位符的支持要低得多。所以我正在寻找替代方法。

注意：解决方案不能依赖于输入是否已更改或已获得值。自动填充的输入既没有技术价值，也没有改变。因此，解决方案需要真正检测占位符本身。

Answer 1

首先，检查元素是否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="">