HTML输入：默认情况下强制使用数字键盘，但允许使用字母

Question

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

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

• 我无法使用，type="number"因为它不允许输入字母。

• 我无法使用，type="text"因为它默认情况下会打开Alpha键盘，并且用户必须切换到数字键盘。

因此，我要查找的选项是打开标准字母数字键盘但已选择数字输入（例如，当您在标准键盘上按？123时）。

我尝试使用type =“ tel”，但不了解如何从数字转换为字母。

我正在使用Cordova，因此，如果没有选择使用HTML进行此操作，那么如果您建议我使用其中的任何一个，都可以使用本机插件。

---

我用的cordova，所以如果没有HTML的方式做事情，我已经准备好集成任何种类的插件，如果你可以建议我的人。

---

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

Answer 1

你可能想看看这个：https : //css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

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

该inputmode会工作，对最新的Android浏览器，以及pattern用于iOS的黑客攻击。请特别注意他们谈论 iOS 不允许用户更改键盘的文章。

希望能帮助到你。

Answer 2

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

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

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

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

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

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

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