关于 Inputmode 你想知道的一切

inputmode 全局属性为带有屏幕键盘的设备的浏览器提供提示，以帮助它们确定用户选择任何 input 或 textarea 元素时要显示哪个键盘。

<input type="text" inputmode="" />
<textarea inputmode="" />

与更改表单的 type 不同，inputmode 不会更改浏览器解释输入的方式——它指示浏览器**显示哪个键盘**。

inputmode 属性历史悠久，但直到最近才被两大移动浏览器采用：iOS 版 Safari 和 Android 版 Chrome。在此之前，它早在 2012 年就在 Android 版 Firefox 中实现，然后在几个月后被移除（尽管它仍然可以通过一个标记使用）。

大约六年后，Android 版 Chrome 实施了此功能——并且随着最近发布的 iOS 12.2，Safari 也开始支持它。

根据我的测试，Opera Mini 和 Opera Mobile 确实支持 inputmode，这与上面的 Caniuse 数据相矛盾。我已经联系他们，看看是否可以同步我们的发现。

但在深入了解该属性的来龙去脉之前，请考虑 WHATWG 活跃标准 提供了 inputmode 文档，而 W3C 5.2 规范 不再在其内容中列出它，这表明他们认为它已过时。鉴于 WHATWG 已对其进行记录，并且浏览器一直在努力支持它，我们将假设 WHATWG 规范是标准。

inputmode 接受多个值。让我们逐一了解它们。

无（None）

<input type="text" inputmode="none" />

我们从这里开始，因为我们很可能不希望在输入框上显示任何类型的键盘。使用 inputmode=none 不会在 Android 版 Chrome 上显示任何键盘。iOS 12.2 仍将显示其默认的字母数字键盘，因此在这方面指定 none 可以算是对 iOS 的重置。无论如何，none 用于呈现自身键盘控件的内容。

数字（Numeric）

<input type="text" inputmode="numeric" />

这可能是野外更常见的 inputmode 值之一，因为它非常适合需要数字但不需要字母的输入——例如 PIN 码输入、邮政编码、信用卡号等。将 numeric 值与 type="text" 的输入一起使用实际上可能比单独将输入设置为 type="number" 更合理，因为与 type="number" 不同，inputmode="numeric" 可以与 maxlength、minlength 和 pattern 属性一起使用，使其在不同的用例中更加通用。

我经常看到网站在输入框上使用 type=tel 来显示数字键盘，这可以作为一种解决方法，但它在语义上是不正确的。如果这让你感到困扰，请记住 inputmode 支持模式，我们可以将 pattern="\d*" 添加到输入框中以获得相同的效果。也就是说，仅当您确定输入框应仅允许数字输入时才使用此方法，因为 Android（与 iOS 不同）不允许用户更改键盘以使用字母，这可能会无意中阻止用户提交有效数据。

电话（Tel）

<input type="text" inputmode="tel" />

使用标准字母数字键盘输入电话号码可能很麻烦。一方面，电话键盘上的每个数字（除了 1 和 0）都代表三个字母（例如，2 代表 A、B 和 C），这些字母与数字一起显示。字母数字键盘不会引用这些字母，因此解码包含字母的电话号码（例如 1-800-COLLECT）需要更多的脑力。

使用 inputmode 设置为 tel 将生成一个标准外观的电话键盘，包括数字 0 到 9、井号 (#) 字符和星号 (*) 字符的按键。此外，我们还获得了那些字母助记符标签（例如 ABC）。

小数（Decimal）

<input type="text" inputmode="decimal" />

将 inputmode 设置为 decimal 值会导致 iOS 中发生细微变化，键盘的外观与 tel 值完全相同，但用简单的十进制 (.) 替换了 +*# 键。另一方面，这对 Android 没有影响，Android 将简单地使用 numeric 键盘。

电子邮件（Email）

<input type="text" inputmode="email" />

我相信你（以及你认识的至少一个人）填写过一个要求填写电子邮件地址的表单，结果却让你切换键盘才能访问 @ 字符。这虽然不危及生命，但肯定不是很好的用户体验。

这就是 email 值的用武之地。它将 @ 字符带入其中，以及点 (.) 字符。

对于需要输入 Twitter 用户名的用户来说，这也是一个有用的键盘，因为 @ 是 Twitter 用于识别用户的核心字符。但是，iOS 在键盘上方显示的电子邮件地址建议可能会造成混淆。

另一个用例可能是，如果您有自己的电子邮件验证脚本，并且不想使用浏览器的内置电子邮件验证。

网址（URL）

<input type="text" inputmode="url" />

url 值为用户提供了一个便捷的快捷方式，可以使用单个键附加顶级域名（例如 .com 或 .co.uk），以及通常在网络地址中使用的键，例如点 (.) 和正斜杠 (/) 字符。键盘上显示的确切顶级域名与用户的区域设置相关。

如果您的输入接受域名（例如 css-tricks.com）以及完整 URI（例如 https://css-tricks.org.cn），则此键盘也很有用。如果您的输入需要验证输入，请改为使用 type="url"。

搜索（Search）

<input type="text" inputmode="search" />

这在 iOS 上显示一个蓝色的 Go 键，在 Android 上显示一个绿色的 Enter 键，两者都替换了 Return。正如您可能从值的名称中猜到的那样，search 对于搜索表单很有用，它提供该提交键以执行查询。

如果您想在 iOS 上显示 Search 而不是 Enter，并在 Android 上显示放大镜图标而不是绿色箭头，请改为使用 type=search。

其他你需要知道的事情

• 基于 Chromium 的 Android 浏览器（例如 Microsoft Edge、Brave 和 Opera）与 Chrome 共享相同的 inputmode 行为。
• 为了简洁起见，我没有包含 iPad 上键盘的详细信息。它与 iPhone 几乎相同，但包含更多按键。Android 平板电脑也是如此，除了第三方键盘，这可能是另一个值得讨论的话题。
• 最初提出的规范中包含 kana 和 katakana 值用于日语输入，但它们从未在任何浏览器中实现，并且此后已从规范中删除。

• latin-name 也是原始规范中的值之一，后来已被移除。有趣的是，如果现在在 iOS 版 Safari 上使用它，它会在键盘上方显示用户的姓名作为建议。

演示

哦，你想亲眼看看所有这些输入模式是如何工作的吗？这是一个演示，你可以在有触摸屏键盘的设备上使用它来查看差异。

参考文献

• WHATWG 规范
• MDN 文档
• Caniuse
• Chrome 平台状态 (Chromium 工单 #244688)