检测输入占位符是否可见
Detect if input placeholder is visible
我正在尝试找到一种方法来检测输入当前是否显示占位符。
我知道我们可以测试给定的浏览器是否支持占位符,我会使用,但这不是我在这里问的。
:placeholder-shown
伪类正是我需要的,但对它的支持非常低。远低于对占位符的一般支持。所以我正在寻找一种替代方法。
注意:解决方案不能依赖于输入是否已更改或获得值。自动填充的输入既没有技术价值,也没有改变。因此,解决方案需要真正检测它自己的占位符。
首先,检查元素是否正在使用 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="">
如今,对于大多数浏览器,我们可以使用伪类来检测是否显示占位符:placeholder-shown
。
function placeholderActive(selector) {
return !!document.querySelector(selector + ':placeholder-shown');
}
const a = placeholderActive('#test1'); // false
const b = placeholderActive('#test2'); // false
const c = placeholderActive('#test3'); // false
const 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="">
CSS技巧:https://css-tricks.com/almanac/selectors/p/placeholder-shown/
可以: https://caniuse.com/#feat=css-placeholder-shown
将 required
属性添加到输入,然后使用:invalid
选择显示占位符的输入。
这不适用于电子邮件等输入类型或具有模式属性的输入。
如果您希望 js 在所有情况下都能正常工作,那么使用 js 仍然是最佳选择。
const hasPlaceholder = !!input.getAttribute("placeholder") // boolean
相关文章:
- 使用javascript的Asp.net内容占位符
- Internet Explorer缺少占位符支持,特别是密码字段
- 如何隐藏按钮单击事件上的占位符
- 需要URL模板占位符查找和替换功能的输入
- 初始化ng模型时,Angular ui选择占位符不起作用
- 如何在ie7或更高版本中设置密码字段的占位符
- 在不使用javascript的情况下,可以在表单字段中设置文本占位符(以提示最终用户插入特定格式)
- Select2-使用自定义模板时不显示占位符
- 替换字符串中的占位符值
- 为什么我应该使用HTML5(上下文:占位符)
- 在contentEditable元素中居中占位符插入符号
- 从气球弹出窗口中删除占位符
- 选择“选项”时更改输入的占位符
- 错误:ReCAPTCHA占位符元素必须为空
- 如何更改文本区域的颜色's文本,具体取决于它是否为占位符
- 是否可以在HTML5占位符中放置锚点
- 检测输入占位符是否可见
- 检查是否支持占位符的简单方法
- Javascript语言中是否存在python风格的占位符
- CSS是否有办法在光标和输入中的占位符文本之间添加空格?