placeholder是纯视觉提示，不参与提交且不设置value，用户未输入时input.value为空字符串；常见错误是误将其当默认值，导致后端收不到数据或js误判为空。
placeholder 文本为什么一提交就消失？
因为 placeholder 本质是“提示”，不是默认值，表单提交时它不会被发送，也不会影响 value。用户没输入时，input.value 是空字符串，不是 placeholder 的内容。
常见错误：用 placeholder 当默认值，结果后端收不到数据，或 JS 判断 input.value === '' 误判为“用户没填”——其实用户可能根本没点进去，placeholder 还在那儿“假装有内容”。
- 需要默认值请用
value属性（如<input value="北京">） - 想区分“未填写”和“填了空字符串”，得靠业务逻辑判断，不能依赖 placeholder 是否可见
- 移动端 iOS Safari 对
placeholder的样式支持略弱，文字颜色、字体大小可能不响应 CSS，需额外测试
placeholder 样式怎么单独控制？
不能直接写 ::placeholder 就完事——不同浏览器前缀不同，必须写全：
input::placeholder {
color: #999;
font-size: 14px;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
input::-ms-input-placeholder { color: #999; }
注意：::-moz-placeholder 在 Firefox 中对 opacity 支持不稳定，设透明度容易失效；font-style: italic 在部分 Android WebView 中不生效。
- 别用
!important强行覆盖，容易和组件库冲突 - 如果用了 CSS-in-JS 或 Shadow DOM，需确认伪元素是否穿透作用域
- 深色模式下，
#999可能太浅，建议用color: var(--placeholder-color)配合 CSS 变量动态切换
placeholder 被遮挡或截断怎么办？
常见于设置了 padding、line-height 不匹配，或字体过粗导致文字撑出可视区。尤其在 type="search" 或带图标输入框中高发。
- 检查
height和line-height是否一致，否则 placeholder 垂直居中偏移 - 避免给
input设overflow: hidden，会裁掉超出部分的 placeholder 文字 - 使用
text-overflow: ellipsis对 placeholder 无效，它只作用于元素内容，不是伪元素 - 长文本 placeholder 在小屏幕易换行，加
white-space: nowrap到::placeholder也不起作用，只能缩短文案或响应式调整字体大小
要不要用 JavaScript 模拟 placeholder？
仅当需要兼容 IE9 及更早版本才考虑，现代项目基本不用。JS 模拟成本高：要监听 focus/blur、处理 input 事件、管理状态、防止与真实 value 冲突……还容易引发焦点丢失、无障碍阅读器识别异常等问题。
- IE10+、Edge 12+、Chrome 4+、Firefox 4+ 全支持原生
placeholder - 如果必须支持旧 IE，优先降级为 label + JavaScript 辅助，而不是强行模拟 placeholder 行为
- 用
Modernizr.input.placeholder检测比 UA 判断更可靠，但多数构建工具已默认忽略 IE9-
真正麻烦的不是 placeholder 本身，而是把它当成交互状态的一部分去设计——比如“输入即清除提示”“输入错误后恢复提示”“多语言切换时同步更新”，这些都需要脱离 placeholder，改用 JS 控制 value 或额外 DOM 节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
