placeholder是浏览器原生支持的纯视觉提示，非默认值或label替代品，不提交、需配label、无障碍不友好；样式用兼容性::placeholder伪元素控制；移动端需设height/line-height防遮挡；动态变化推荐class切换而非JS赋值。
placeholder 属性直接写在
它不是 JS 控制的，也不需要 CSS 额外激活，浏览器原生支持。只要加了，用户没输入时就会显示浅灰色提示文字。
常见错误是把它当成“默认值”或“label 替代品”，其实它既不提交、也不替代语义化标签，只是纯视觉提示。
-
placeholder的内容不会出现在表单提交数据中 - 不能用空格或纯空白字符占位（浏览器会忽略）
- 对无障碍访问（如屏幕阅读器）不友好，必须配
- 中文文案建议用全角标点，避免中英文混排导致换行错乱
placeholder 文字颜色和样式怎么改？用 ::placeholder 伪元素
不同浏览器前缀不同，现代写法要兼顾兼容性。只写 ::placeholder 在旧版 Safari 和 IE 里不生效。
input::placeholder,
textarea::placeholder {
color: #999;
font-size: 14px;
}
input::-webkit-input-placeholder { /* Chrome/Edge/Safari */
color: #999;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #999;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #999;
}注意：::placeholder 不能继承父级字体设置，必须显式声明 font-family，否则可能变成系统默认等宽字体。
立即学习“前端免费学习笔记（深入）”；
placeholder 在移动端经常被遮挡或截断，怎么避免？
iOS Safari 对 placeholder 的渲染高度控制很弱，尤其配合 padding 或 line-height 时容易文字偏上、被裁掉顶部。
- 给
设定明确的height和line-height（两者相等） - 避免只靠
padding-top撑高，会导致 placeholder 垂直居中计算异常 - 在 iOS 上测试时，打开「辅助功能 → 显示缩放」，确认提示文字是否仍完整可见
- 如果用了自定义字体，确保该字体在 iOS 系统中能 fallback 到可渲染字体
想让 placeholder 动态变化？别直接操作属性，用 JS 切换 class 更稳
虽然可以 input.placeholder = '新提示'，但频繁修改会触发重绘，且在某些安卓 WebView 中有闪动问题。
更稳妥的做法是预设多组 placeholder 值，用 class 控制显示哪一组：
然后用 JS 切换 class，配合 CSS 隐藏/显示对应提示：
.search-email::placeholder { content: "输入邮箱"; }
.search-phone::placeholder { content: "输入手机号"; }实际项目中，placeholder 变化往往伴随表单状态切换（比如登录页切注册页），这时候用 class 控制比硬编码 JS 赋值更易维护、也更少出兼容问题。
真正麻烦的是当 placeholder 需要国际化或带变量（比如“搜索 {category} 相关内容”），那就得放弃原生 placeholder，改用浮动 label 或 JS 模拟——原生能力到此为止。
