应使用 type="email" 触发原生校验与邮箱键盘，配合 name="email" 和 autocomplete="email" 启用历史填充，datalist 实现后缀补全，JS 提示需监听 input 事件并防抖。
用 type="email" 触发原生邮箱格式校验和软键盘优化
浏览器对 input[type="email"] 有明确的内置行为：提交时自动检查基础格式（含 @ 和域名部分），在移动设备上默认调出带 @ 和 . 的邮箱专用软键盘。这不是提示，但它是所有后续提示功能的基础——如果连这个都没加，autocomplete 或 list 属性大概率不会被尊重。
注意两点：
• 不要写成 type="text" + 正则 JS 校验来“模拟”，那样会丢失软键盘和表单级验证钩子；
• 单纯加 type="email" 不会自动弹出历史邮箱列表，必须配合其他属性。
启用浏览器自动填充邮箱建议需满足三个条件
Chrome、Edge、Safari 等现代浏览器只在同时满足以下条件时，才在聚焦时下拉显示用户曾输入过的邮箱：
-
name属性值为email、username或user-email（推荐直接用name="email"） - 存在
autocomplete="email"属性（不能省略，且值必须是精确字符串email） - 该
input在页面中不是被动态插入或 disabled/readonly 的（需初始渲染即存在且可交互）
示例写法：
<input type="email" name="email" autocomplete="email" placeholder="请输入邮箱">
立即学习“前端免费学习笔记（深入）”；
用 datalist 实现固定邮箱后缀快捷补全
如果想让用户快速输入常见域名（如 @gmail.com、@qq.com），datalist 是最轻量可控的方式。它不依赖用户历史，也不需要 JS，但仅支持后缀级补全（光标必须在末尾才能触发）。
关键点：
• list 属性值必须与 datalist 的 id 完全一致；
• option 的 value 是完整邮箱（如 user@gmail.com），但浏览器通常只展示并补全 @ 后部分；
• 移动端支持度一般，iOS Safari 对 datalist 支持较弱，别依赖它做核心功能。
示例：
<input type="email" list="email-suggestions"><br><datalist id="email-suggestions"><br> <option value="user@gmail.com"><br> <option value="user@qq.com"><br> <option value="user@163.com"><br></datalist>
JS 动态提示需拦截 input 事件而非 keydown
如果要做实时邮箱域名校验或下拉提示（比如输入 “ali” 就提示 “@alibaba.com”），必须监听 input 事件——keydown 拿不到刚输入的字符，change 又太晚。
容易踩的坑：
• 不要每次 input 都直接渲染 DOM 列表，加个 setTimeout 防抖（300ms 足够）；
• 提取邮箱前缀时用 value.slice(0, value.lastIndexOf('@'))，别用正则瞎切，避免误判 “+” 或 “-”；
• 提示列表的 position: absolute 容器，父元素必须设 position: relative，否则定位飘移。
真正影响体验的是：用户按 Tab 或回车选中提示项时，得手动设置 input.value 并触发 input 事件，否则 Vue/React 等框架的双向绑定不会更新。
