HTML中input标签的placeholder属性设置占位文字-html教程-PHP中文网

placeholder仅支持和，且限于text、search、tel、url、email、password、number等类型；date/time行为不一致；hidden、checkbox、radio、file等完全不支持；不可替代label，无语义权重，不参与验证，样式需用多浏览器前缀伪元素控制。

html中input标签的placeholder属性设置占位文字

直接加 placeholder 属性就行，但不是所有地方都能用，也不是加了就万事大吉。

哪些元素能用 `placeholder`

只支持和，且仅限特定 type 值：

text、search、tel、url、email、password、number
date、time 等日期类 type 在多数浏览器中也支持，但行为不一致（比如 Chrome 显示 placeholder，Safari 可能忽略）
hidden、checkbox、radio、file、range 等类型完全不支持，加了也无效
或普通加 placeholder 属性——浏览器会静默忽略，不会报错也不会显示 placeholder 不是 label 的替代品这是最容易被忽视的语义陷阱：屏幕阅读器通常不读取 placeholder 文本，尤其在未聚焦时；用户可能根本不知道这个字段要填什么用户开始输入后，提示立即消失，无法回看格式要求（比如“138-8888-8888”）如果只靠 placeholder="必填"，等于把关键业务规则藏在视觉暂态里，违反 WCAG 3.3.2 原则正确做法：始终配，把格式说明、必填标识、错误提示等放在 label 附近或中 CSS 自定义 placeholder 样式要注意兼容性不同浏览器用不同伪元素实现，只写 input::placeholder 会漏掉旧版 Firefox 和 IE： HTML Text Extract 从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。下载 Chrome/Safari/Opera：支持 input::placeholder，也认 input::-webkit-input-placeholder Firefox 19+：需 input::-moz-placeholder IE10–11：必须用 input:-ms-input-placeholder Edge 12–18：部分支持 ::placeholder，但更稳的是同时写 ::-webkit-input-placeholder 和 ::-moz-placeholder 别用 !important 强行覆盖——先检查是否漏写了某个浏览器前缀，再确认选择器权重是否足够 input::placeholder, input::-webkit-input-placeholder, input::-moz-placeholder, input:-ms-input-placeholder { color: #777; font-style: normal; } JavaScript 动态操作 placeholder 要小心时机通过 JS 读写没问题，但要注意 DOM 状态和框架响应逻辑：读取：el.placeholder 直接返回字符串值，安全设置：el.placeholder = "新提示" 立即生效，但不会触发 input 或 change 事件在 React/Vue 中，不要用 placeholder 控制显隐逻辑——它不响应 state 变化，只看原生 value 是否为空。想实现“输入中显示辅助提示”，得用额外层 + focus/input 事件手动控制中文输入法下 placeholder 可能闪烁：这是浏览器对 compositionstart 事件处理差异导致的，不是 bug，也不建议 hack 修复真正容易被忽略的是：placeholder 的语义权重极低，它既不参与表单验证，也不影响可访问性树结构，更不能作为交互逻辑的判断依据。把它当成纯视觉提示，其他该写的 label、aria-label、验证规则，一个都不能少。