Chrome自动设置输入格式=数字

Question

我有一个 Web 应用程序，我使用 HTML5 属性 type="number" 将输入字段指定为数字。

<input type="number" value="123456" />

通过指定类型，Chrome 会自动设置值的格式以包含逗号 (123,456)。在其他浏览器中，它不会格式化数字，但也不会阻止非数字字符。

在这种情况下，我不想添加逗号。有什么办法可以关闭本地化格式吗？

Answer 1

发生这种情况是因为 Chromium 中与 HTML5 number 输入类型相关的行为，并且您肯定不是唯一一个不关心这一点的。

我过去使用 text 类型解决了这个问题。例如，这效果很好（刚刚在 Chrome 11.0.696.71 中测试）：

<input type="text" 
       placeholder="Enter Text" 
       name="inputName" 
       pattern="[0-9]*">

number 类型的这种行为（至少对我来说）绝对是一个错误，因为 HTML5标准指定number在格式化显示时应具有以下值：

给定数字输入，将数字转换为字符串的算法如下：返回表示输入的有效浮点数。

该标准定义了“有效浮点数”这里，据我所知，不期望包括分组字符。

---

更新

我已将问题隔离到 WebKit 内部的以下代码中。我也在这里添加了解决该问题的行：

// From LocalizedNumberICU.cpp
String formatLocalizedNumber(double number, unsigned fractionDigits)
{
    NumberFormat* formatter = numberFormatter();
    if (!formatter)
        return String();
    UnicodeString result;
    formatter->setMaximumFractionDigits(clampToInteger(fractionDigits));
    formatter->setGroupingUsed(FALSE); // added this line to fix the problem
    formatter->format(number, result);
    return String(result.getBuffer(), result.length());
}

下周我将休假，但计划在我回来时将此补丁提交给 WebKit 团队。一旦他们（希望）接受补丁，Chromium 应该将其作为正常刷新过程的一部分。

---

您可以在此处查看原始代码，修补版本此处，以及
原始文件和修补文件此处。最终补丁由 Shinya Kawanaka 创建。

Answer 2

您可以检查一些额外的属性，包括 valueAsNumber。

Chrome 尝试根据输入类型为您提供最佳的输入法。在这种情况下，数字还有一些额外的功能，例如上下切换。

这样做的要点是，如果数字无效，您将能够检测到存在错误，并设置样式 input[type=number]:invalid { background-color: red; }

Answer 3

您可以尝试...

这将强制在 Firefox 上输入 0-9 4、桌面端和iPhone上；我手头没有 Chrome 来尝试，但它应该能起到同样的作用。

Answer 4

数字是新的 HTML5 输入类型之一。其中有很多 - 电子邮件、日期、时间、网址等。但是，我认为到目前为止只有 Chrome 实现了它们。其他人则使用默认类型（文本）。

有关 HTML5 输入类型的详细信息：http://diveintohtml5.ep.io/forms.html

如果您想在 Chrome 上禁用它，如果用户设备是手持设备，则可以保留文本并将其更改为数字。由于如果用户设备嗅探给出错误的结果，这并不是可用性杀手，因此您应该不会遇到任何问题。

Answer 5

请参阅我对这个类似问题的回答。

我相信目前使用 对于避免这个陷阱是最合乎逻辑的。其他选项对我来说很有趣并且有点新（例如 pattern 属性），但我发现它们对我的设计来说并不令人满意。您可以在此处查看我不久前为希尔顿完成的移动应用程序的屏幕截图（它实际上显示在我首先引用的答案中）。

Answer 6

以下是正则表达式的完整列表，您可以将其插入 html 输入标记的“pattern”属性中：HTML5 Pattern

以下是我如何使用模式来格式化两位小数点的数字：

，它似乎在 iPad 上运行得不太好。

Answer 7

试试这个：

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}

Answer 8

为什么要禁用本地化格式？如果您想要不同的格式，只需更改 PC 的本地化设置即可。为什么用户不有兴趣以他或她的本地格式显示数字？这绝对不是 Chrome 中的错误，而是一项功能！

在我看来，您实际上并没有使用“数字”作为输入，而是使用带有模式的“文本”代码。请参阅其他帖子以获取相关建议。