11

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

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

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

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

解决方案 3

<input type="number" />

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

在此处输入图像描述

解决方案 4

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

<input type="tel" />

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

铬输入类型=

4

5 回答 5

4

对于您的特定任务，我有非凡的解决方案：我们采用最佳解决方案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" />
于 2018-08-08T13:07:53.453 回答
3

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

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

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

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

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

  • 输入值现在是文本而不是数字，因此您可能需要在 JS 中进行额外的解析。
  • 在桌面浏览器上，输入将接受字母字符，表单将无效，但您需要处理此问题并显示相关的用户反馈（如果使用框架，可能是自动的）
  • 它仅受现代移动浏览器支持，例如 iOS 12.2（2019 ish）上的 Safari（参见规范）
于 2020-03-10T11:16:53.613 回答
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"/>

要查看哪些浏览器支持输入模式，请单击此处

祝你好运

于 2021-12-11T21:37:19.030 回答
1

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

于 2018-08-07T23:07:21.657 回答
0

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

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

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

操作系统检测功能是这样的，取自其他 SO 答案：

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

于 2018-08-08T20:30:31.710 回答