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

Question

我一直在阅读许多其他问题，例如这些[1][2][3]，但问题仍然存在。

我需要找到一种“最干净”的方式来为移动设备创建一个 HTML input 并遵守所有这三个规则：

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

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

3. 完全遵守 HTML5 规则，经过 W3C 验证器测试

我尝试了什么？

我遇到过这些解决方案，但它们都不完全遵守上述三个规则。

解决方案 1

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

此解决方案尽管在 iOS 中工作并符合 W3C 验证器测试的 HTML 规则，但在 Chrome Android 中提供了带有 QWERTY 键盘的完整键盘。

解决方案 2

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

此解决方案适用于 iOS 和 Android Chrome 系统，在两个系统上均显示数字键盘，但使用 W3C 验证器会引发 HTML 验证错误：

pattern 属性仅在输入类型为电子邮件、密码、搜索、电话、文本或 url 时才允许使用。

解决方案 3

<input type="number" />

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

解决方案 4

我看到很多开发者都在使用这个解决方案

<input type="tel" />

但在 Android Chrome 中它不允许点符号.（因此没有浮动），并且键有字母，这是多余的

Answer 1

我遇到了这个问题，以下两种解决方案似乎是回答这个问题的最佳方法

第一个解决方案非常简单，适用于 Android 和 IOS。此解决方案在桌面上将有一个向上和向下按钮，在 Android 和 IOS 上只有一个数字键盘；

<form action="" method="">
<input pattern="[0-9]*"/>
</form>

此解决方案的唯一问题是，用户将无法输入 ,（逗号）或 . （句点），因为它们不会出现在键盘上。如果你改变模式，以上将不再适用于IOS。

并非所有浏览器都支持第二种解决方案，但似乎适用于所有现代浏览器，包括 safari 15.1。

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

查看哪些浏览器支持输入模式click here

祝你好运

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 上的 Safari（2019 年左右）（请参阅 spec）

Answer 3

对于您的特定任务，我有非凡的解决方案：我们采用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 4

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

将这段代码添加到页面的“onload”中

//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 操作系统时运行。

Answer 5

正如 cmets 中所述，由于没有直接的方法来完成此操作，因此最好的解决方法是始终使用带有 if 语句的 input type="number"，如果设备是 iOS 设备，则代码将添加类型的正确模式属性。