对于移动设备，HTML<输入类型=“数字">的最佳设置 [英] Best settings for HTML <input type="number">, for mobile devices

问题描述

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

I've been reading many other questions, like these[1][2][3] for example, but the problem still persists.

我需要找到一种干净"的方法来为移动设备提供HTML input，并且该方法要遵守所有这三个规则:

I need to find the "cleanest" way to have a HTML input for mobile devices and which respects all these three rules:

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

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

1. suitable mainly for numbers, integer or float

2. shows the numeric keypad on mobile devices, on Chrome for Android and Safari for iOS, with no strange extra keys

完全遵守HTML5规则(由W3验证程序测试)

fully respects the HTML5 rules (tested by W3 validator)

我曾经遇到过这些解决方案，但是这两个主题都没有完全尊重上述三个规则.

I've been across these solutions, which neither of theme cumulatively respects those three above rules.

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

尽管此解决方案可在iOS上运行并满足w3验证程序测试的HTML规则，但仍可在Chrome Android中使用QWERTY键盘显示完整的键盘.

This solution despite working in iOS and fulfilling HTML rules tested by w3 validator, presents in Chrome Android the full keypad with the QWERTY keyboard.

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

此解决方案可在iOS和Android Chrome两种系统上使用，在两个系统上均显示数字小键盘，但会抛出HTML验证错误

This solution works on both systems iOS and Android Chrome, showing the numbers keypad on both systems, but it throws out a HTML validation error

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

Attribute pattern is only allowed when the input type is email, password, search, tel, text, or url.

<input type="number" />

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

This solution passes the HTML test, shows nice on Chrome, but on iOS keypad it presents several unwanted keys

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

I see that many developers use this solution

<input type="tel" />

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

But as tested with Android Chrome, it doesn't allow dot symbols (.), and the keys have letters, which is superfluous.

推荐答案

对于您的特定任务，我有一个非凡的解决方案:我们采用type="text"和模式采用最佳解决方案，然后添加可纠正type属性的JavaScript.我们这样做是为了通过W3验证器.

For your specific task I have the extraordinary solution: we take the best solution with type="text" and pattern and then add the JavaScript which corrects the type attribute. We do it to pass through W3 validator.

解决方案

// 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验证程序).

My solution respects all your three rules (W3 validator inclusive).

但是我不得不提到的是，在这种情况下(在带模式的情况下)，在iOS上，我们无法使用数字小键盘放置浮点数，因为在iOS上，我们没有任何带有数字(包括点)的小键盘.在Android上，我们有这种可能性.如果您想使用带有浮点数的数字小键盘，则必须为iOS编写额外的解决方案，如下所示:

But I have to mention that in this case(with pattern) on iOS we do not have the possibility to put float numbers with numeric keypad because on iOS we do not have any keypad with numbers including points. On Android we have this possibility. If you want to have numeric keypad with float numbers then you have to write for iOS extra solution like follows:

 <input type="number" />

这篇关于对于移动设备，HTML<输入类型=“数字">的最佳设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！