键盘类型适配（Input Mode & Keyboard Type）是什么：效果预览与 AI 设计提示词

效果预览

手机号 → tel 键盘138 0000 0000

金额 → decimal299.00

inputmode="numeric" · type="tel" · 字号 ≥16px 防 iOS 缩放 · enterkeyhint="next"

适合用在哪

移动端所有表单。输错键盘 = 用户流失。

容易踩的坑

银行卡号或邮编用 type=number，前导 0 被吞且出现上下微调箭头。
输入框字号小于 16px，iOS 聚焦时页面自动放大、布局错乱。
只设 inputmode 没设 autocomplete，用户无法一键填入地址和验证码。

设计提示词 · Prompt

键盘类型适配（Input Mode）：手机端按字段语义设 inputmode 与 type——电话 tel、数字 inputmode="numeric"、带小数 inputmode="decimal"、邮箱 type="email"（弹出 @ 键）、网址 type="url"（弹出 .com 键）、搜索 type="search"（带清除键）。配套细节：字号 ≥16px 防 iOS 聚焦自动放大；autocapitalize/autocorrect 按需关闭；验证码自动填充（autocomplete="one-time-code"）；enterkeyhint 定制回车键文案（"搜索"/"下一步"/"发送"）。表单键盘弹出会顶起页面——固定底部元素要用 visualViewport API 调整。

Input Mode: On mobile, set inputmode and type according to the field's meaning — phone uses tel, numbers inputmode="numeric", decimals inputmode="decimal", email type="email" (shows the @ key), URL type="url" (shows the .com key), search type="search" (with a clear key). Supporting details: font size ≥16px to prevent iOS auto-zoom on focus; disable autocapitalize/autocorrect as needed; one-time code autofill (autocomplete="one-time-code"); customize the Enter key label with enterkeyhint ("Search" / "Next" / "Send"). The keyboard pushes the page up when it appears — fixed bottom elements should adjust using the visualViewport API.

常见搭配

同一页面里经常和「键盘类型适配」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

验证码格子输入OTP / PIN Input 内联校验状态Input Validation States 浮动标签输入Floating Label Input 安全区适配Safe Area Insets

演示 HTML 结构

<div class="s d-kbdadapt">
  <div class="d-kbdf"><span>手机号 → tel 键盘</span><span class="d-input">138 0000 0000</span></div>
  <div class="d-kbdf"><span>金额 → decimal</span><span class="d-input">299.00</span></div>
  <div class="d-kbdnote">inputmode="numeric" · type="tel" · 字号 ≥16px 防 iOS 缩放 · enterkeyhint="next"</div>
</div>