最直接有效的是<input type="email">，移动端原生识别并触发带@和.com的软键盘；仅用inputmode="email"不可靠，需配合type="email"确保兼容性。
input type="email" 是最直接有效的写法
移动端浏览器（iOS Safari、Android Chrome 等）识别 type="email" 后，会自动触发带 @ 和 .com 快捷键的软键盘。这不是 CSS 或 JS 控制的，而是原生表单语义的直接响应。
常见错误是只写 type="text" + pattern 或靠 JS 模拟验证，这完全不会影响键盘类型。
- 必须用
<input type="email">，不能只靠inputmode="email"单独使用（iOS 旧版本不支持后者） - 避免加
inputmode="text"或inputmode="verbatim"，会覆盖默认行为 -
autocomplete="email"可选，有助于唤起密码管理器推荐，但不影响键盘
为什么加 inputmode="email" 不够可靠
inputmode 是 HTML5 的提示属性，用于明确指定输入意图，但它在邮箱场景下属于“锦上添花”，不是“雪中送炭”。iOS 12.2+ 和较新 Android 版本才开始较好支持 inputmode="email"，而 type="email" 自 iOS 5 起就稳定生效。
- 单独写
<input inputmode="email">（无type）→ 键盘仍是默认文本键盘 - 写
<input type="text" inputmode="email">→ 多数安卓机可生效，但 iOS 仍回退到文本键盘 - 正确组合：
<input type="email" inputmode="email">→ 兼容性最佳，冗余但稳妥
遇到键盘没变？先检查这几个硬性条件
即使写了 type="email"，键盘仍显示为普通文本键盘，大概率是以下某个条件被破坏：
立即学习“前端免费学习笔记（深入）”；
- 元素被设了
readonly或disabled→ 软键盘根本不会弹出 - 父容器有
pointer-events: none或遮罩层盖住了 input → 实际未获得焦点 - 用了第三方 UI 库（如某些 React 封装的
Input组件），内部把type强制改成了"text" - 页面在 WebView 中运行，且该 WebView 未启用表单支持（例如某些旧版 Cordova 配置）
调试时可在真机上右键检查元素，确认渲染后的 type 属性值确实是 email，而不是被 JS 动态改写过。
不要用 JavaScript 强行干预键盘类型
没有 JS API 能直接控制软键盘布局。试图用 focus() + setSelectionRange() 或监听 touchstart 来“诱导”键盘切换，既不可靠，又可能引发 iOS 上的聚焦异常（比如键盘闪一下就收起）。
- 移除所有类似
el.setAttribute('type', 'email')的动态修改逻辑——必须初始 HTML 就是type="email" - 避免在
onFocus里改inputmode，时机太晚，系统已按初始type决定了键盘 - 如果业务强依赖自定义键盘（如仅允许数字+@），只能接受妥协：用
type="email"基础唤起，再用pattern和 JS 实时校验输入内容
真正难处理的是混合输入场景（比如“用户名@域名”但用户名部分要限制字符），这时候语义已模糊，type="email" 反而不如 type="text" inputmode="text" 加前端校验来得可控。
