Chrome自动格式输入=数字

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

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

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

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

发生这种情况是由于与numberChromium中的HTML5输入类型相关联的行为，并且您绝对不是唯一不在乎此的人。

过去，我使用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应该将其拉进来作为其正常刷新过程的一部分。

你可以看到原来的代码在这里，该补丁的版本在这里，和原文件的差异和补丁的文件在这里。最终补丁是由Shinaka Kawanaka创建的。

您可以检查几个额外的属性，包括valueAsNumber。

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

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

你可以尝试...

<input type="text" pattern="[0-9]*" value="123456" />

它将在桌面版Firefox 4和iPhone上强制输入0-9。我手边没有Chrome可以尝试使用，但应该也可以使用。

Number是新的HTML5输入类型之一。这些内容很多-电子邮件，日期，时间，URL等。但是，我认为到目前为止，只有Chrome浏览器才实现了它们。其他的则使用默认类型（文本）。

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

如果要在Chrome上禁用它，则可以保留文本，如果用户设备是掌上电脑，则可以将其更改为数字。如果用户设备嗅探给出错误的结果，这不是可用性杀手，那么您应该不会有任何问题。

有关此类似问题，请参阅我的回答。

我认为，使用<input type="tel" />以避免目前这种陷阱是最合逻辑的。其他选项对我来说很有趣，有些新颖（例如pattern属性），但我发现它们对我的设计并不令人满意。您可以在这里查看我不久前为希尔顿完成的移动应用程序的屏幕截图（实际上是在我最初引用的答案中显示的）。

这是可插入html输入标签的“ pattern”属性的正则表达式的完整列表：HTML5模式

这是我使用模式来格式化两位小数点的方式：

<input type="number" pattern="\d+(\.\d{2})?" />

不幸的是，它似乎在iPad上无法正常工作。

尝试这个：

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

您为什么要禁用本地化格式？如果要使用其他格式，只需更改PC的本地化设置。用户为什么不希望以其本地格式显示数字？这绝对不是Chrome中的错误，而是一项功能！

在我看来，您并不是真正使用“数字”作为输入，而是使用带有模式的“文本”代码。有关其他建议，请参见其他帖子。