HTML5中合法占位符属性是placeholder(无下划线),仅适用于input和textarea元素,为空且未聚焦时显示,不支持富文本,不替代label,需用::placeholder伪元素定制样式,JavaScript通过placeholder属性读写,其文本不属于DOM节点。

HTML5 中 placeholder 属性不是 _placeholder
浏览器根本不识别 _placeholder 这种写法——它只是个自定义属性,不会触发任何原生占位行为。HTML5 规范定义的合法属性是 placeholder(无下划线),仅适用于 和 元素。
placeholder 的实际渲染行为和限制
它只在输入框为空且未获得焦点时显示;一旦用户开始输入或元素获得焦点,文字自动消失。注意以下几点:
- 不支持富文本,不能换行、加粗或嵌入 HTML 标签
- 无障碍访问中,
placeholder不替代,屏幕阅读器通常不朗读它 - 部分旧版 iOS Safari 会在输入时短暂闪现 placeholder(iOS 12 及更早版本常见)
- 无法用 CSS 直接选中 placeholder 文本内容(需用伪元素:
::placeholder)
用 CSS 自定义 placeholder 样式必须用 ::placeholder
不能写成 :placeholder 或 ::-webkit-input-placeholder 单独使用——现代浏览器已统一支持标准伪元素 ::placeholder,但兼容性仍需处理:
input::placeholder,
textarea::placeholder {
color: #999;
font-style: italic;
}
/ 如需兼容老版 WebKit(如旧版 Chrome/Safari),可叠加 /
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
JavaScript 读写 placeholder 要走 DOM 属性,不是 dataset
_placeholder 如果真被手动加到元素上,只能通过 element.getAttribute('_placeholder') 拿到,但它对表单行为零影响。正确操作是:
立即学习“前端免费学习笔记(深入)”;
- 读取原生占位符:
input.placeholder(属性值)或input.getAttribute('placeholder') - 动态修改:
input.placeholder = '新提示' - 判断是否显示中:不能靠 JS 检测“是否可见”,只能结合
input.value === '' && !input.matches(':focus')
真正容易被忽略的是:placeholder 文本不属于 DOM 子节点,无法用 textContent 或 innerHTML 获取或干涉;它纯属浏览器渲染层的装饰性提示。











