placeholder是HTML原生属性，仅作简短操作提示，须配合label使用且不可替代必填提示；其样式需全浏览器兼容写法；验证失败时应通过CSS伪类和焦点控制优化体验，避免JS模拟或动态绑定。
placeholder 属性直接写在 input 标签里就行
HTML 原生就支持 placeholder，不用 JS 或 CSS 模拟。它只在输入框为空且未获得焦点时显示浅色提示文字，获得焦点后自动消失——这是浏览器默认行为，无需额外控制。
常见错误是把它当成「默认值」或「标签替代品」：用户一点击就没了，又没其他视觉提示，容易填错字段。正确做法是搭配 label 使用，且确保语义清晰：
-
placeholder仅用于简短操作提示（如“请输入手机号”“示例：admin@example.com”），不是字段说明 - 必填项必须用
required属性 + 显式label，不能只靠 placeholder 暗示 - 避免写成长句或带格式内容（比如换行、emoji），部分浏览器会截断或渲染异常
<label for="email">邮箱地址</label><br><input type="email" id="email" placeholder="name@domain.com" required>
placeholder 文字颜色和样式没法跨浏览器统一改
Chrome、Firefox、Safari 对 ::placeholder 伪元素的支持细节不同，比如 Firefox 要用 ::-moz-placeholder，老版 Safari 需要 ::-webkit-input-placeholder。光写一个 ::placeholder 在某些版本里完全不生效。
如果真要定制颜色或字体大小，得写全兼容写法：
input::placeholder,<br>input::-webkit-input-placeholder,<br>input::-moz-placeholder,<br>input::-ms-input-placeholder {<br> color: #999;<br> font-size: 14px;<br>}
注意：::-ms-input-placeholder 是 IE10–11 的，Edge 16+ 已支持标准 ::placeholder；但如果你项目还兼容 IE，就得保留。
placeholder 在表单验证失败后不会自动恢复
当用户提交空表单、触发 required 验证失败，输入框获得焦点并显示红色边框时，placeholder 仍会消失——这会让用户误以为“已经填过”，其实只是验证态没重置视觉反馈。
解决办法不是靠 JS 强制恢复 placeholder（那会干扰原生逻辑），而是：
- 用
:invalid:not(:placeholder-shown)CSS 选择器，在验证失败且内容为空时，给输入框加更明显的视觉提示（比如背景淡红） - 确保表单提交失败后，把焦点设回第一个出错字段：调用
inputElement.focus()，此时 placeholder 自然重新显示 - 不要用
value=""初始化然后靠 JS 清空来“模拟 placeholder”，这会破坏原生的空值判断逻辑
React/Vue 里别用 state 控制 placeholder 内容
在 React 中写 placeholder={this.state.hint} 看似灵活，但一旦 state 更新延迟或组件重渲染卡顿，placeholder 可能闪现、错位，甚至在输入过程中意外重置。Vue 的 v-bind:placeholder 同理。
真正需要动态 placeholder 的场景极少，多数是设计问题。如果非得换：
- 静态提示优先用 HTML 属性硬编码，最稳
- 动态场景（如多语言切换）应在语言状态更新后，同步更新整个 input 元素，而不是只更新 placeholder
- 绝对不要监听
input事件去实时改 placeholder，它和用户输入无关
placeholder 的本质是弱提示，不是交互控件。把它当装饰用，别当状态管理对象。
