直接在<input>标签里加placeholder属性即可，无需JS或CSS，浏览器原生支持；仅对text、email、tel、url、password、number、search及textarea有效，不可替代<label>，也不参与表单提交。
怎么写带 placeholder 的 input 标签
直接在 <input> 标签里加 placeholder 属性就行，不用 JS、不用 CSS，浏览器原生支持。
常见错误是把 placeholder 写成 value，或者误以为它能当默认值用——它只在输入框为空且未聚焦时显示，一点击就消失，也不参与表单提交。
-
placeholder只对text、email、tel、url、password、number、search和textarea有效 - 别给
type="date"、type="file"、type="checkbox"加placeholder，写了也看不见 - 必须配
label，否则屏幕阅读器读不到字段用途；推荐用for/id关联写法
placeholder 和 label 到底谁写啥
label 是语义必需的：告诉用户“这是干啥的”，辅助工具靠它识别字段；placeholder 是视觉提示：告诉用户“该填啥样”。两者不能互相替代。
典型反例：<label>邮箱</label><input placeholder="邮箱"> —— placeholder 重复 label，毫无信息增量。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<label for="email">邮箱地址</label><input id="email" type="email" placeholder="example@domain.com"> - 移动端尤其注意：placeholder 里别写“请输入邮箱”，而要写具体格式示例，比如“user@domain.com”
- 如果字段有格式约束（如手机号），placeholder 比 label 更适合放格式提示，例如
placeholder="138-1234-5678"
移动端 placeholder 显示不全或偏移怎么办
iOS Safari 和部分安卓 WebView 对 ::placeholder 渲染很敏感，常出现文字被截顶、垂直居中错位、字体 fallback 成等宽等问题。
核心原因是浏览器对行高和基线计算不一致，不是 CSS 写错了，而是没显式控制渲染上下文。
- 给
input设定固定height和相等的line-height，比如都设为40px - 避免只靠
padding-top撑高，这会干扰基线定位 - 自定义字体时，在
::placeholder伪元素里显式声明font-family，否则可能退回到系统等宽字体 - CSS 兼容写法必须包含四套前缀：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder - 统一透明度：
opacity: 1，因为 Firefox 默认半透明，其他浏览器不透明
能不能用 JS 动态改 placeholder 文本
能，但不推荐频繁操作。直接赋值 el.placeholder = "新提示" 在部分旧版 WebView 中会触发重绘闪动，且 iOS 上可能延迟生效。
更稳妥的做法是预设多组文案，用 class 切换控制显示哪一组，而不是 runtime 修改属性值。
- 不要在
input的focus或blur事件里反复改placeholder，容易打断用户操作流 - 若必须动态更新，建议配合
requestAnimationFrame节流，避免连续触发重排 -
placeholder不响应required状态变化，也不影响校验逻辑，它纯粹是 UI 提示层
