Question

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

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

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

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

Answer 1

这是因为与Chromium中的HTML5 number输入类型相关联的行为，您肯定not the only one并不关心这一点。

我过去使用text类型解决过这个问题。例如，这种方法运行良好（刚刚在Chrome 11.0.696.71中测试过）：

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

number类型的这种行为（至少对我而言）肯定是一个错误，因为HTML5 standard指定number在格式化显示时应具有以下值：< / p>

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

标准定义了一个“有效浮点数”here，据我所知，包括分组字符是不可取的。

更新

我已将问题与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应该将其作为正常刷新过程的一部分。

您可以看到原始代码here，修补后的修订版here以及原始文件和修补文件here。最后的补丁由Shinya Kawanaka创建。

Answer 2

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

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

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

Answer 3

你可以试试......

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

这将强制在桌面和iPhone上的Firefox 4上输入0-9;我手头没有Chrome可以尝试，但它也应该这样做。

Answer 4

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

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

如果要在Chrome上停用它，您可以保留为文本，如果用户设备是手持设备，则将其更改为数字。因为如果用户设备嗅探产生错误的结果，它不是可用性杀手，那么你应该没有任何问题。

Answer 5

请参阅我对this similar question的回答。

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

Answer 6

试试这个：

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

Answer 7

这是一个正则表达式的完整列表，您可以插入＆＃34;模式＆＃34; html输入标记的属性：HTML5 Pattern

以下是我使用模式格式化小数点后两位的方法：

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

不幸的是，它似乎在iPad上运行得不是很好。

Answer 8

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

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

Chrome自动格式化输入=数字

8 个答案:

更新