适用于移动设备的HTML <input type ="number">的最佳设置

Question

我一直在阅读许多其他问题,例如[1] [2] [3],但问题仍然存在.

我需要找到"最干净"的方式来input获得移动设备的HTML 并尊重所有这三个规则:

1. 主要适用于数字,整数或浮点数

2. 显示移动设备上的数字小键盘,适用于Android版Chrome和适用于iOS的Safari,没有奇怪的额外按键

   

3. 完全尊重HTML5规则(由W3验证器测试)

我试过了什么？

我一直在讨论这些解决方案,这两个主题都没有累积地尊重上述三条规则.

解决方案1

<input type="text" pattern="\d*" />

此解决方案尽管在iOS中工作并且完成了由w3验证器测试的HTML规则,但在Chrome Android中提供了带有QWERTY键盘的完整键盘.

解决方案2

<input type="number" pattern="\d*" />

此解决方案适用于iOS和Android Chrome系统,显示两个系统上的数字键盘,但它会抛出HTML验证错误

仅当输入类型为电子邮件,密码,搜索,电话,文本或URL时,才允许使用属性模式.

解决方案3

<input type="number" />

此解决方案通过HTML测试,在Chrome上显示不错,但在iOS键盘上显示了几个不需要的密钥

解决方案4

我看到许多开发人员使用此解决方案

<input type="tel" />

但是经过Android Chrome测试,它不允许使用点符号(.),并且键有字母,这是多余的.

Answer 1

对于您的特定任务，我有一个非凡的解决方案：我们采用 和 模式的最佳解决方案type="text"，然后添加纠正类型属性的 JavaScript。我们这样做是为了通过 W3 验证器。

解决方案

// iOS detection from: stackoverflow.com/a/9039885 with explanation about MSStream
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)
{
    var inputs = document.querySelectorAll('input[type="number"]');
    for(var i = inputs.length; i--;)
        inputs[i].setAttribute('pattern', '\\d*');
}

<input type="number" />

我的解决方案尊重您的所有三个规则（包括 W3 验证器）。

但我必须提到，在 iOS 上的这种情况下（带有模式），我们无法使用数字键盘输入浮点数，因为在 iOS 上我们没有任何带有数字（包括点）的键盘。在 Android 上我们有这种可能性。如果你想要带有浮点数字的数字键盘，那么你必须为 iOS 编写额外的解决方案，如下所示：

 <input type="number" />

Answer 2

还有另一种选择：<input type="text" inputmode="numeric" pattern="[0-9]*">

为什么 GOV.UK 设计系统团队更改了数字的输入类型绝对值得一读。

请注意，如果您仍然想走这条<input type="number">路线，有一个很好的解决方案：第 4 点 - 滚动 -关闭数字输入旋转器。

每个解决方案似乎都有一些缺点，我认为最合适的解决方案将取决于您尝试收集的数据类型，护照号码与某人的年龄与物品数量。

我发现这个解决方案的缺点是：

• 输入值现在是文本而不是数字，因此您可能需要在 JS 中进行额外的解析。
• 在桌面浏览器上，输入将接受字母字符，表单将无效，但您需要处理此问题并显示相关的用户反馈（如果使用框架，则可能是自动的）
• 它仅受现代移动浏览器支持，例如 iOS 12.2（2019 ish）上的 Safari（请参阅规范）