inputmode支持text、decimal、numeric、tel、email、url、search、none等值，分别对应全键盘、带小数点数字键盘、纯数字键盘、电话键盘、邮箱键盘、网址键盘、搜索键盘和禁用键盘；其中decimal在iOS 16.4+才支持，search在各平台回车文案不同，none可禁用软键盘但部分Android WebView可能忽略。

inputmode 属性支持哪些值，对应什么键盘？

inputmode 是原生 HTML 属性，用于提示浏览器在移动端应弹出哪种软键盘。它不强制改变输入行为，但现代浏览器（Chrome 66+、Safari 16.4+、Firefox for Android）基本尊重该提示。

常见取值与实际效果：

• text：默认全键盘（含空格、标点）
• decimal：数字键盘带小数点（iOS 和 Android 均支持，比 type="number" 更可靠）
• numeric：纯数字键盘（无小数点，适合手机号、验证码）
• tel：电话键盘（含 * # 号，注意不是 type="tel" 的替代，而是补充）
• email：带 @ 和 . 的键盘（iOS 显示“@.” 键，Android 部分厂商优化）
• url：带 / 和 . 的键盘（常触发 “.com” 快捷键）
• search：搜索键盘（回车键显示为 “搜索”，触发 Enter 事件）

为什么不能只靠 type 属性，还得加 inputmode？

type 属性（如 type="number"）会改变表单验证和语义，但副作用明显：iOS 上 type="number" 会禁用长按粘贴、可能屏蔽非数字字符输入（如负号、e）、且无法保证小数点可见；type="tel" 虽弹出拨号键盘，但失去数字校验能力。

inputmode 是纯粹的 UI 提示层，不影响 value 类型或提交逻辑，可与 type="text" 安全组合使用：

<input type="text" inputmode="decimal" pattern="[0-9]*\.?[0-9]+">

这样既获得小数键盘，又保留 JS 控制输入内容的自由度，也避免了 type="number" 在 Safari 中 value 返回字符串却被转 Number 的隐式转换问题。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

inputmode 在不同平台的实际表现差异

不是所有值在所有系统上都生效，尤其 iOS 对部分值支持滞后：

• inputmode="decimal"：Android 全面支持；iOS 16.4+ 才开始支持，旧版 iOS 会回落到 text
• inputmode="search"：Android 和 iOS 均支持，但 iOS 回车键文字是 “搜索”，Android 多为 “Go” 或 “Search”，需监听 Enter 而非依赖按钮文案
• inputmode="none"：明确禁止软键盘弹出（适合自定义输入组件），但部分 Android WebView 仍可能忽略
• 如果同时设置 type="email" 和 inputmode="text"，以 inputmode 为准 —— 浏览器优先采纳更细粒度的提示

配合 pattern 和 JavaScript 做输入防护时要注意什么？

inputmode 不做任何校验，只是键盘提示。真要限制用户输入，得靠 pattern + oninput 过滤，但要注意时机：

• pattern 只在表单提交时校验，对实时输入无效
• 在 input 事件中用 setSelectionRange 修正光标位置，否则删除字符后光标可能跳到末尾
• 避免在 keydown 中 preventDefault() 拦截数字键 —— 这会破坏粘贴、语音输入等辅助功能
• 推荐方式：监听 input，用正则测试 event.target.value，非法则 event.target.value = previousValue，并手动恢复光标

真正容易被忽略的是：即使设置了 inputmode="decimal"，用户仍可通过粘贴、语音输入等方式塞入非法字符。键盘类型只是起点，不是终点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！