placeholder仅对可编辑文本类表单控件生效,如text、search、email、url、tel、number(部分)、textarea和password;hidden、checkbox、radio、file等不支持;它非value,不提交、不被js读取,且需配合label保障可访问性。

placeholder 只对表单控件生效,不是所有 <input> 都能用,也不是所有浏览器都默认支持它的全部行为。
哪些 <input> 类型支持 placeholder
只有可编辑的文本类输入控件才认这个属性。比如:
-
<input type="text">、<input type="search">、<input type="email">、<input type="url">、<input type="tel">、<input type="number">(部分浏览器支持) -
<textarea></textarea>也完全支持 -
<input type="password">支持,但提示文字会被掩码(chrome 显示 ●●●,firefox 显示明文,行为不一致) -
<input type="hidden">、<input type="checkbox">、<input type="radio">、<input type="file">—— 全都不支持,设了也无效
placeholder 不是 value,别混用
它只是视觉提示,用户一聚焦(focus)就消失,且不会随表单提交;而 value 是真实数据。常见错误:
- 把
placeholder当默认值用,结果后端收不到初始内容 - 用 JS 读
element.value想拿到 placeholder 文本 —— 不行,它不在value里 - 用 CSS 选
::placeholder时没加浏览器前缀,导致 Firefox 或 safari 不生效(要写成::-moz-placeholder、::-webkit-input-placeholder)
移动端和可访问性容易翻车的地方
android 原生浏览器、旧版 ios Safari 对 placeholder 的渲染有延迟或截断;更重要的是,它不是语义化标签,屏幕阅读器不一定朗读。所以:
立即学习“前端免费学习笔记(深入)”;
- 不能只靠
placeholder说明字段用途,必须配<label></label>(哪怕视觉隐藏) - 避免写“请输入邮箱”这种弱提示,换成“邮箱地址(如 name@example.com)”更实用
- 在 iOS 上,如果
input有autocomplete="off",某些版本会连placeholder一起抑制显示
真正麻烦的不是怎么写 placeholder,而是它既不能替代 <label></label>,也不能当默认值用,还容易在小屏上被键盘顶飞或字体缩放后错位 —— 这些细节比语法本身更常导致线上问题。