代码之家 › 专栏 › 技术社区 › João Pimentel Ferreira

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

iphone-keypad numeric-keypad android-keypad html-input mobile-safari

6

João Pimentel Ferreira · 技术社区 · 6 年前

我读过很多其他的问题,比如 [1] [2] [3] 例如,但问题仍然存在。

我需要找到“最干净”的方法来创建一个HTML input 对于移动设备,并遵守所有这三条规则:

主要适用于数字 ,整数或浮点
显示 移动设备上的数字键盘 ,在Android的Chrome和iOS的Safari上,没有奇怪的额外键

完全尊重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的测试,它不允许使用点符号(.),而且键上有字母,这是多余的。

3 回复 | 直到 6 年前

1

3

Bharata colxi 6 年前

对于您的具体任务,我有一个特别的解决方案:我们采用 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上,我们没有任何数字键盘包括点数。在Android上我们有这个可能性。如果您想使用带有浮点数的数字键盘,则必须为iOS编写额外的解决方案,如下所示:

 <input type="number" />

2

1

James 6 年前

正如评论中提到的,由于没有直接的方法来实现这一点,最好的解决方法是始终使用 input type="number" 使用if语句,如果设备是iOS设备,则代码将向类型添加正确的模式属性。

3

0

João Pimentel Ferreira 6 年前

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