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

Question

例如，我读过许多其他问题，例如[1] [2] [3]，但问题仍然存在。

我需要找到一种“干净”的方式来为移动设备提供HTML input，并且该方式应遵循所有这三个规则：

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

2. 在Chrome（Android版）和Safari（iOS版）上显示移动设备上的数字键盘，没有奇怪的额外键

   

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验证错误

  

样式属性仅在输入类型为电子邮件，   密码，搜索，电话，文本或网址。

解决方案3

<input type="number" />

此解决方案通过了HTML测试，在Chrome上显示不错，但是在iOS键盘上却​​显示了一些不需要的键

解决方案4

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

<input type="tel" />

但是，正如在Android Chrome浏览器上进行的测试一样，它不允许使用点号（。），并且按键包含字母，这是多余的。

Answer 1

对于您的特定任务，我有一个非凡的解决方案：我们使用type="text"和模式采用最佳解决方案，然后添加可纠正type属性的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]*">

Why the GOV.UK Design System team changed the input type for numbers绝对值得一读。

请注意，如果您仍然想走<input type="number">路线，那么第4点-滚动-Turn Off Number Input Spinners就是一个不错的解决方案。

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

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

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

Answer 3

如评论中所述，由于没有直接的方法来完成此操作，因此最好的解决方法是始终将input type="number"与if语句一起使用，如果设备是iOS设备，则代码将在类型中添加适当的pattern属性。

Answer 4

根据@Alex Charters的建议，我使用jQuery提出了这种解决方案，它似乎更快，更优雅。

将此代码段添加到页面的“加载”

//shows numeric keypad on iOS mobile devices
if(getMobileOperatingSystem() === "iOS"){
    $('input[type="number"]').attr("pattern", "\\d*");
}

操作系统检测功能是taken from other SO answer：

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

我经过测试，它符合三个规则。当操作系统为iOS时，它将添加pattern属性。默认情况下，我不执行此操作，因为我意识到上述代码段需要花一些时间根据输入的数量进行处理，因此它仅在使用iOS操作系统时才运行。