, 对于移动设备,mobile-safari,html-input,android-keypad,numeric-keypad,iphone-keypad"/>
时间戳

首页 > 解决方案 > HTML 的最佳设置, 对于移动设备

mobile-safari - HTML 的最佳设置, 对于移动设备

问题描述

我一直在阅读许多其他问题，例如这些[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 中它不允许点符号.（因此没有浮点数），并且键有字母，这是多余的

铬输入类型=

标签： mobile-safarihtml-inputandroid-keypadnumeric-keypadiphone-keypad

解决方案

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

推荐阅读