HTML 输入：默认强制使用数字键盘，但允许使用字母答案

【问题标题】：HTML Input: force numeric keyboard by default but allow lettersHTML 输入：默认强制使用数字键盘，但允许使用字母
【发布时间】：2018-08-17 01:09:44
【问题描述】：

我有一个 HTML 输入。输入是在 Android 手机上的 Chrome 中打开的网页上。

我想要一个选项，让用户在开始输入值时看到数字键盘。但同时，我希望他能够输入字母数字字符。

所以我试图找到的选项是标准字母数字键盘打开但数字输入已被选择（就像您在标准键盘上按 ?123 时一样）。

我曾尝试使用 type="tel" 但我不明白如何从数字切换到字母。

我正在使用 Cordova，所以如果没有使用 HTML 的选项，我可以使用本机插件（如果您建议我使用其中的任何一个）。

我使用cordova，所以如果没有 HTML 方式来做事，我准备集成任何类型的插件，如果你能建议我的话。

TL;DR：这是我希望看到的默认键盘布局。有可能吗？

【问题讨论】：

【解决方案1】：

<input inputmode="numeric" pattern="[0-9]*" type="text" name="creditcard">

inputmode 适用于最新的 Android 浏览器，pattern 是适用于 iOS 的 hack。请特别注意他们谈论 iOS 不允许用户更换键盘的文章。

希望对你有帮助。

【讨论】：

【解决方案2】：

您不能这样做，因为提供给用户的键盘布局基于您输入的输入类型。当用户实际上可以输入字母数字字符时，向用户显示数字键盘将是一个糟糕的 UI 原则。 tel 输入类型不允许您将键盘更改为数字键盘，因为它专门设计为只接受电话号码。

因此，如果您想让用户在输入中输入字母数字字符，则不应将键盘设置为数字。请看下面的例子：

<input type="text" name="valText"/>

另一方面，如果您希望用户只输入数字字符，那么您应该将输入类型设置为数字，如下所示：

<input type="number" name="valNumber"/>

解决方法是创建多个输入并将其类型设置为您希望用户在该特定字段中输入的任何内容。然后，您可以将它们连接到单个值以以这种方式保存它们。但是，您需要将它们保存为包含字符和数字的串联字符串。

您还可以查看链接 here 以检查您可以使用的不同输入类型，以防您发现其中一种对您更有用。但是，您必须记住的是输入类型将定义键盘布局。您也可以查看this 以获得更好的理解。

【讨论】：

看来您在回答中重新表述了我的问题。我了解键盘布局基于输入类型。这就是问题的本质。我知道 90% 的用户只会输入数字，但仍然很少输入字符。所以目标是避免额外的点击。
我理解您的担忧，但如果您希望用户输入字母和数字，通常会向用户显示字母数字键盘。有了你的问题，你就违背了用户体验的规范。如果我是你，我会创建多个输入类型并将它们连接在一起。也就是说，如果您想坚持默认显示数字键盘。
同意，似乎最好的选择是使用两个输入。感谢您的宝贵时间。