17370845950

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 获取或干涉；它纯属浏览器渲染层的装饰性提示。