placeholder属性仅支持（type为text、search、tel、url、email、password、number）和，不支持、、等元素；它仅为视觉提示，不可替代或value，样式需用::placeholder伪元素控制。
直接在 <input> 或 <textarea></textarea> 标签里加 placeholder 属性就行，不用 JS、不改 DOM 结构，浏览器原生支持。
哪些元素和 type 支持 placeholder
只对两类元素生效：<input>（除 type="hidden"、"button"、"submit"、"reset"、"image"、"file"、"checkbox" 等非文本类）和 <textarea></textarea>。
-
<select></select>、<input type="date">（Chrome 下常被忽略）、<input type="number">（部分版本不显示）都不保证显示placeholder -
<input type="tel">和<input type="search">支持良好，适合加格式示例，如placeholder="138-1234-5678" - 别给自定义组件或
div加placeholder属性——它只是无效字符串，不会触发任何行为
placeholder 不是 value，也不能替代 <label></label>
常见错误是把 placeholder 当默认值用，比如写成 <input placeholder="张三">，结果用户一点击就清空，反而干扰输入。
-
placeholder是纯提示，不参与表单提交，也不影响value初始值（value默认为空字符串） - 屏幕阅读器通常不读
placeholder，所以每个<input>必须配<label for="xxx"></label>或aria-label - 必填说明、格式约束（如“6–20位”）、错误提示等，不能只靠
placeholder——它一输就消失，用户根本记不住
样式控制必须用伪元素，且前缀要写全
想改颜色、字体大小或透明度，不能直接设在 <input> 上，只能用 CSS 伪元素。现代浏览器虽支持 ::placeholder，但旧版仍需兼容写法。
- 必须同时声明：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder - Firefox 默认让
placeholder半透明，其他浏览器不透明，所以建议统一加opacity: 1 - 字体继承失效很常见：如果父级设了
font-family，::placeholder里得显式重写，否则可能变成等宽字体 - 禁用
display: none或动画（如transition淡入），视觉干扰大，且部分浏览器不支持
JavaScript 动态操作 placeholder 的边界在哪里
JS 可以安全读写 el.placeholder，但它不响应状态变化，也不触发事件，尤其在框架中容易误用。
- 设置后立即生效：
el.placeholder = "新提示"，但不会触发input或change事件 - React/Vue 中不要用
placeholder控制显隐逻辑（比如“有错误时显示红色提示”）——它只看value是否为空，不感知 state - 需要动态提示（如实时字数、校验反馈），必须用邻近 DOM 元素 +
textContent更新，而不是改placeholder - IE9 及以下不支持该属性，polyfill（如
placeholder.js）需在 DOM 加载后手动初始化，且仅对原生<input>有效
最常被忽略的是：placeholder 文本过长时，iOS Safari 会无提示截断，Android WebView 对换行符处理不稳定，而你没法用 CSS 修复——这时候就得换方案，比如浮动标签（floating label）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
