HTML5：输入中的附加字符 type="number"答案

【问题标题】：HTML5: additional chars in input with type="number"HTML5：输入中的附加字符 type="number"
【发布时间】：2015-04-27 17:43:14
【问题描述】：

在我们的应用中，我们有许多用于填写学校成绩的输入。到现在为止我们有

<input type="text" name="mark">

当我们尝试使用 HTML5 的新功能时，我们将其更改为

<input type="number" name="mark">

所以在手机/平板电脑上，我们只有数字接口。情况就是这样。可以输入“5+”等输入等级（例如一些两个字母的快捷方式“ab”等）。用户可以自定义。

是否有任何方法可以扩展输入以将数字和所有字符视为有效，并将 Android/iOS 键盘布局扩展到仅此？

编辑：

别忘了我想知道我是否可以在移动设备上扩展键盘布局。如果不可能，我会通过一些验证回退到文本。

【问题讨论】：

【解决方案1】：

我相信你可以使用你所描述的模式属性：

检查控件值的正则表达式。模式必须匹配整个值，而不仅仅是某个子集。使用 title 属性来描述模式以帮助用户。当 type 属性的值为 text、search、tel、url 或 email 时，该属性适用；否则将被忽略。正则表达式语言与 JavaScript 相同。该模式没有被正斜杠包围。

例如<input type="text" name="HasAPattern" pattern="[0-9A-Z]{3}" title="Enter 3 characters">

将产生一个只允许 3 个字符的输入元素。

不幸的是，我认为自定义键是不允许的，因此您必须使用具有上述属性的附加数字模式的文本类型。

自定义键盘必须用于非标准键盘布局/输入按钮。

【讨论】：

我会尝试，但我认为它会在带有额外模式验证的 Android/iOS 上显示标准键盘。
W3schools 告诉我 IOS 不支持模式，可能是最新版本，但要注意兼容性
@djkevino ios中确实不支持，不错(caniuse.com/#search=pattern)
我刚刚阅读了苹果的文档，他们说它是受支持的，但它可能是最近添加的。 (developer.apple.com/library/ios/documentation/StringsTextFonts/…)
你说得对，我的标记无法自定义键盘布局

【解决方案2】：

您可能只需要普通的文本字段并使用 JQuery Validate 之类的东西来限制输入并在用户输入不正确的数据时发出警告。

另一种选择是将所有可能的选项放入 HTML 选择标记中。

【讨论】：

【解决方案3】：

你可以使用

    <input type="text" name="mark" pattern="[a-z0-9]{2}">

您可以在模式中指定您的正则表达式并将任何字符列入白名单

要拥有 50 多种输入，请使用以下内容

   <input type="text" name="mark" pattern="[0-9]{2}[+]?">

【讨论】：

【解决方案4】：

你可以简单地使用，

<input type="tel" name="mark">

这样就可以了。

【讨论】：