placeholder仅在input值为空且未获焦点时显示；value非空、聚焦、type不支持（如number）、css遮蔽或ie低版本均会导致不显示。
input 的 placeholder 属性为什么没显示
placeholder 文本只在 input 值为空且未获得焦点时可见；一旦用户开始输入或 input 被脚本设了初始值（哪怕只是空字符串 ""），它就自动隐藏，且不会因失去焦点而恢复。
- 常见错误：用
value=""初始化文本框，结果 placeholder 永远不出现 —— 改用value留空、不写该属性即可 - 仅支持部分 type：如
text、email、search、tel有效；type="number"或type="date"在某些浏览器中可能忽略 placeholder - 无障碍注意：placeholder 不是 label 替代品，必须配
label[for]或嵌套label，否则屏幕阅读器无法正确播报输入目的
用 datalist 实现带提示的下拉联想
datalist 是原生轻量级输入提示方案，适合固定选项集（如城市名、常见关键词），比 JS 插件更稳定、无需额外加载。
- HTML 结构必须匹配：
input[list="xxx"]的list值要与datalist[id="xxx"]的id完全一致，大小写敏感 -
option标签不能有闭合标签（即写成<option value="abc"></option>，而非<option value="abc"></option>），否则部分浏览器不渲染 - 不触发 submit：选择
datalist项只是填充 input 值，不会自动提交表单，需用户手动回车或点提交按钮 - 样式不可控：浏览器默认下拉菜单无法用 CSS 定制外观，如需美化，得换
select+ JS 或第三方库
<input list="browsers" name="browser"><datalist id="browsers"><option value="Chrome"></option> <option value="Firefox"></option> <option value="Safari"></option></datalist>
focus/blur 事件里手动控制提示文字
当 placeholder 不够用（比如需要动态提示、多语言切换、或与后端校验联动），就得用 JS 控制提示逻辑。
- 不要直接操作
placeholder属性做动态更新 —— iOS Safari 有缓存 bug，改了可能不刷新；建议用额外span浮层或title属性降级 - 监听
focus时清空提示文案（如果它被当真实值写进了value），监听blur时检查input.value === ""再补回提示，避免覆盖用户刚输一半又切走的内容 - 注意移动端软键盘唤起时机：iOS 上
focus后立即scrollIntoView()可能失效，建议加setTimeout(..., 0)微任务延迟
label 和 aria-label 怎么选才不影响提示体验
真正的“输入提示”分两类：视觉可见的（placeholder/datalist）、语义可读的（label）。混淆二者会导致提示对部分用户不可见。
- 必写
label：即使用了 placeholder，也要有显式label，否则 WCAG 2.1 AA 不达标；aria-label只应在无视觉 label 时作为最后兜底（如图标按钮） - 避免重复播报：若同时写了
label和aria-label，多数屏幕阅读器会优先读aria-label并跳过label，导致设计意图丢失 - placeholder 不能含关键信息：例如密码强度提示写在 placeholder 里，用户聚焦后就消失，视障用户无法回顾 —— 这类应放在
label后或独立div[role="alert"]中实时更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
