在移动设备上，HTML 的最佳设置。

5 浏览
0 Comments

在移动设备上，HTML 的最佳设置。

我已经阅读了许多类似的问题，例如这些 [1] [2] [3]，但问题仍然存在。我需要找到一种在移动设备上使用HTML input 的“最干净”方法，同时遵守以下三个规则：

  1. 主要适用于数字，整数或浮点数
  2. 在移动设备上显示数字键盘，在Android的Chrome和iOS的Safari上，没有奇怪的额外按键
  3. 完全遵守HTML5规则，通过W3C验证器测试

我尝试了什么？

我已经尝试了以下解决方案，但它们都不能同时满足上述三个规则。

解决方案1

这个解决方案在iOS上工作，并通过W3C验证器对HTML规则进行了测试，但在Android的Chrome上显示完整的键盘，包括QWERTY键盘。

解决方案2

这个解决方案在iOS和Android的Chrome上都有效，在两个系统上都显示数字键盘，但在W3C验证器中会出现HTML验证错误：

属性 pattern 仅允许在输入类型为email、password、search、tel、text或url时使用。

解决方案3

这个解决方案通过了W3C HTML测试，在Chrome上显示很好，但在iOS的键盘上显示了几个不需要的按键。

解决方案4

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

但在Android的Chrome上它不允许使用点符号 .（因此无法输入浮点数），并且键盘上有字母，这是多余的。

0

3 答案

0 Comments

在移动设备上，HTML的的最佳设置是什么？

为什么GOV.UK设计系统团队要更改数字的输入类型？

有另一种选择：<input type="text" inputmode="numeric" pattern="[0-9]*">。《为什么GOV.UK设计系统团队更改了数字的输入类型》值得一读。

请注意，如果您仍然希望使用，则有一个很好的解决方案针对第4点-滚动-《关闭数字输入微调器》。每个解决方案似乎都有一些缺点，我认为最佳选择取决于您尝试收集的数据类型，例如护照号码、某人的年龄或物品数量。

我发现这种解决方案的缺点有：

  • 输入的值现在是文本而不是数字，因此您可能需要在JavaScript中进行额外的解析。
  • 在桌面浏览器上，输入将接受字母字符，表单将无效，但您需要处理此问题并显示相关的用户反馈（如果使用框架可能会自动处理）。
  • 它仅受到现代移动浏览器的支持，例如iOS 12.2上的Safari（2019年左右）（请参阅规范）。

所以，无论是选择使用还是，都需要权衡各种因素并根据具体情况进行选择。

0
0 Comments

问题的出现原因是在移动设备上，使用HTML的标签时，无法输入逗号和句点。解决方法有两种：

第一种解决方法适用于Android和IOS，可以在桌面上显示上下按钮，在Android和IOS上只显示数字键盘。但是，这种方法无法输入逗号和句点。

第二种解决方法在所有现代浏览器（包括Safari 15.1）上都有效，但并非所有浏览器都支持。该方法是将标签的inputmode属性设置为"numeric"，并且使用正则表达式模式[0-9]*来限制输入只能是数字。

然而，添加正则表达式模式[0-9.]*时，在IOS设备上会显示常规键盘，而不是数字键盘。要在全屏数字键盘中输入逗号和句点，唯一的方法是使用type="tel"属性。

为了在移动设备上实现最佳的HTML设置，可以选择在Android和IOS上只显示数字键盘，并且无法输入逗号和句点；或者在现代浏览器上使用，但无法在IOS设备上实现全屏数字键盘和输入逗号和句点的功能。

0
0 Comments

最佳的HTML 在移动设备上的设置方法

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

解决方案

//来自iOS检测：stackoverflow.com/a/9039885，其中有关于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" />

为什么这样通过W3验证，即使"属性模式只允许在输入类型为电子邮件、密码、搜索、电话、文本或URL时使用"？或者为什么不默认使用type="number"，然后再用代码添加pattern？

因为W3验证器不检查JavaScript。W3验证只是用来检查你的代码的。这可以帮助你找到代码中的错误，但这不是一种规范。至于第二个问题：这是相同的解决方案，你也可以这样做，这是一个偏好的问题。

pattern="\d*"修复似乎在iPad上不再起作用（我在iOS12.2的Beta版中注意到了这一点），所以我们使用type=tel代替。

有很多资源可以告诉你为什么不应该使用用户代理检测，其中一个主要原因是：当新的浏览器推出和现有的浏览器变得更好时，您将不得不不断更新代码，而浏览器需要不断寻找绕过未更新的检测代码的技巧。

（请注意，本文只是将原文内容整理输出，并不意味着该解决方案的有效性和准确性。）

0