inputmode / enterkeyhint——软键盘长什么样
桌面端无论什么输入框，键盘都是同一个物理键盘；但在手机上，聚焦不同输入框会弹出布局不同的虚拟键盘——数字框只有九宫格、邮箱框多出 @。决定这套布局的，主要是 inputmode 属性，而它与 type 相互独立:inputmode
只影响键盘外观，不改变控件的语义、校验与取值方式。
软键盘只在触屏设备上弹出。本页的输入框在桌面浏览器里看不到键盘变化，请用手机访问，逐个聚焦感受布局差异；下方每个字段配了一张键盘示意图，在桌面也能看清各 inputmode 大致会突出哪些键。
1 · 逐个 inputmode 对照
聚焦任一输入框查看真实键盘（手机）；示意图标出该模式下被突出/新增的键：
2 · type="number" vs inputmode="numeric"
既然想要数字键盘，直接 type="number" 不就行了？对验证码、银行卡号、邮编这类「由数字字符组成、但不是用来做算术的串」，type="number" 会带来一连串副作用。规范与实践都更推荐 type="text" 配 inputmode="numeric":
| 维度 | type="number" |
type="text" inputmode="numeric" |
|---|---|---|
| 软键盘 | 数字键盘 | 数字键盘（pattern="[0-9]*" 配合更稳） |
| 前导零 | 可能被抹除 / 规范化 | 原样保留 |
| 非数字字符 | 允许 e + - .（科学计数） |
就是纯文本，自己用 pattern 约束 |
maxlength |
无效 | 有效 |
| 滚轮 / 上下键 | 会意外增减数值 | 无此行为 |
| 适用 | 真要做算术的「数量」「价格」 | 验证码 / 卡号 / 邮编 / 电话等「数字串」 |
3 · enterkeyhint——回车键的文案
与键盘布局正交的还有右下角那颗回车键。enterkeyhint 提示它该显示什么动作——搜索框显示「搜索」、多步表单显示「下一步」、聊天框显示「发送」。同样只是外观提示，不改变行为：
取值清单。inputmode:none / text / decimal / numeric / tel / search / email / url。enterkeyhint:enter / done / go / next / previous / search / send。其中
inputmode="none" 用于自绘键盘（如计算器、表情面板）——抑制系统键盘但仍保留光标。
4 · 相关链接
- MDN · inputmode · developer.mozilla.org——全局属性
inputmode的取值表(none / text / decimal / numeric / tel / search / email / url)与各自唤起的虚拟键盘说明。 - MDN · enterkeyhint · developer.mozilla.org——提示软键盘回车键文案的全局属性，七个取值(
enter / done / go / next / previous / search / send)与适用场景。 - HTML Standard · inputmode / enterkeyhint · WHATWG——规范对两个属性的权威定义：取值的关键字状态机，以及它们只作 UA 的键盘外观提示、不改变控件语义与校验的约定。
-
HTML inputmode 属性与移动端虚拟键盘 · zhangxinxu.com——系统梳理
inputmode各取值唤起的键盘，以及为何验证码场景应弃用type="number"、改用inputmode="numeric"。