Chrome 自动格式输入=数字

Posted

技术标签:

【中文标题】Chrome 自动格式输入=数字【英文标题】:Chrome auto formats input=number 【发布时间】:2011-07-17 17:39:52 【问题描述】:

我有一个 Web 应用程序,我在其中使用 html5 属性 type="number" 将输入字段指定为数字。

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

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

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

【问题讨论】:

我知道我可以将类型保留为文本并使用 JS 来强制执行字符类型。但是,我在移动应用程序中使用它,并希望键盘默认为数字键盘布局。 您看到的是哪个版本的 Chrome?我在我的版本中没有看到它。 @Donvan:我也使用 crome 但不包括逗号?我的版本中也没有。 我在 11.0.696.25 beta 中看到了逗号 请确保不要将 chrome 用作您的移动浏览器 =P 【参考方案1】:

试试这个:

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

【讨论】:

【参考方案2】:

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

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

【讨论】:

有很多原因。例如,当输入类型为数字时,4 位数的年份字段(例如 2013)变为 2,013!这其中的逻辑在哪里? 如果它仍然是本地的,那么抱怨的人就会减少。除了年份、邮政编码、信用卡的明显格式错误之外,您仍在处理这些逗号被发送到服务器!它不是本地的 @LDJ 你不应该使用type=number 一年,我们有&lt;input type=year&gt; 用于那个【参考方案3】:

这是因为与 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 在格式化显示时应具有以下值:

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

并且标准定义了一个“有效浮点”数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 创建。

【讨论】:

有效,但不是理想的解决方案,因为您丢失了向上/向下箭头。仍然是迄今为止我发现的最好的方法。 @njak32 同意。在 Chrome 中必须避免 number 是一种痛苦;希望问题能尽快解决。 我已经制作了一个修复程序来纠正 Chromium 中的这个问题,但实际问题出在 WebKit 代码中。 6/13放假回来后提交给WebKit项目。 Webkit 错误 62939 由 Patrick 输入!谢谢! +1 不仅能回答问题,还能花时间实际修复导致错误的软件!【参考方案4】:

这里是一个完整的正则表达式列表,您可以将它们插入到 html 输入标记的“模式”属性中:HTML5 Pattern

这是我如何使用模式来格式化小数点后两位:

&lt;input type="number" pattern="\d+(\.\d2)?" /&gt;

不幸的是,它在 iPad 上似乎不太正常。

【讨论】:

【参考方案5】:

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

我相信使用&lt;input type="tel" /&gt; 是目前避免这个陷阱最合乎逻辑的。其他选项对我来说很有趣并且有点新(比如pattern 属性),但我发现它们对我的设计并不满意。你可以看一下我不久前为希尔顿完成的移动应用程序的屏幕截图here(它实际上显示在我第一次引用的答案中)。

【讨论】:

【参考方案6】:

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

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

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

【讨论】:

我希望浏览器以某种方式允许我通过 HTML 控制数字的格式,而不是要求用户禁用它。我想要一个数字字段,但没有格式,以便桌面和移动设备都可以拥有相同的体验。照原样,我正在测试的移动设备通过默认为适当的键盘布局很好地处理它。桌面上的 Chrome(开发频道)以我最初发布的方式调整 UI。 @Donovan 使用 javascript 并取消除数字以外的任何按键事件怎么样?或者,允许按下它们,但在输入框旁边显示错误。 我已经连接了一个只允许数字的脚本,但我将输入设置为 type="number" 的主要原因是移动(iPad/iPhone/等)键盘默认为一个有数字。这样用户就不必点击数字布局按钮。这只是为了方便。【参考方案7】:

你可以试试……

&lt;input type="text" pattern="[0-9]*" value="123456" /&gt;

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

【讨论】:

它做同样的事情。逗号,逗号,逗号。 @DonovanWoodside:它不会在ios上添加逗号。【参考方案8】:

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

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

这里的重点是,如果数字无效,您将能够检测到有错误并设置样式input[type=number]:invalid background-color: red;

【讨论】:

我很欣赏这个答案是 2.5 年前写的,但想分享我刚刚在 Chrome 31.0.1650.63 中测试过的经验,valueAsNumber 属性不是必需的,可以省略。跨度>

以上是关于Chrome 自动格式输入=数字的主要内容,如果未能解决你的问题,请参考以下文章

在excel中如何将输入的数字自动转换为日期

Excel中输入身份证号,数字自动变成科学技术法怎么办?

vue输入框输入数字后自动转换为金额格式

vue输入框输入数字后自动转换为金额格式

excel数字输入后变颜色,是啥原因?

vb.net在textbox1中输入六个数字后,自动将格式转换为时间格式,如输入120314自动变成12:03:14,怎么操作