Html Chrome 自动格式 input=number
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5345095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome auto formats input=number
提问by Donovan Woodside
I have a web application where I'm specifying an input field to be a number using the HTML5 property type="number".
我有一个 Web 应用程序，我在其中使用 HTML5 属性 type="number" 将输入字段指定为数字。
<input type="number" value="123456" />
By specifying the type, Chrome automatically formats the value to include a comma (123,456). In other browsers it does not format the number, but it also does not prevent non-numeric characters.
通过指定类型，Chrome 会自动将值格式化为包含逗号 (123,456)。在其他浏览器中，它不会格式化数字，但也不会阻止非数字字符。
In this case, I don't want the comma to be added. Is there any way to turn off localized formatting?
在这种情况下，我不希望添加逗号。有没有办法关闭本地化格式？
回答by arcain
This is occurring because of the behavior associated with the HTML5 numberinput type in Chromium, and you are definitely not the only onethat doesn't care for this.
这是因为与numberChromium 中的 HTML5输入类型相关的行为，而且您绝对不是唯一不关心这一点的人。
I have worked around this issue in the past by using the texttype. For example, this has worked well (tested just now in Chrome 11.0.696.71):
我过去曾通过使用text类型解决过这个问题。例如，这运行良好（刚刚在 Chrome 11.0.696.71 中测试）：
<input type="text"
placeholder="Enter Text"
name="inputName"
pattern="[0-9]*">
This behavior of the numbertype (to me, at least) is definitely a bug, because the HTML5 standardspecifies the numbershould have the following value when formatted for display:
这种number类型的行为（至少对我来说）绝对是一个错误，因为HTML5 标准指定number在格式化显示时应该具有以下值：
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating point number that represents input.
给定数字输入，将数字转换为字符串的算法如下： 返回代表输入的有效浮点数。
And the standard defines a "valid floating point" number here, and as far as I can see, including grouping characters is not expected.
并且该标准在此处定义了一个“有效浮点”数，据我所知，不希望包含分组字符。
Update
更新
I've isolated the issue to the following code down in the guts of WebKit. I've included the line that fixes the issue here as well:
我已经在 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());
}
I'm on vacation next week, but plan on submitting this patch to the WebKit team when I return. Once they (hopefully) accept the patch, Chromium should pull it in as part of its normal refresh process.
我下周休假，但计划在我回来时将此补丁提交给 WebKit 团队。一旦他们（希望）接受补丁，Chromium 应该将其作为正常刷新过程的一部分。
You can see the original code here, the patched revision here, and the diff of the original file and the patched file here. The final patch was created by Shinya Kawanaka.
你可以看到原来的代码在这里，该补丁的版本在这里，和原文件的差异和补丁的文件在这里。最后的补丁是由 Shinya Kawanaka 创建的。
回答by Kinlan
There are a couple of extra properties that you can check including valueAsNumber.
您可以检查几个额外的属性，包括valueAsNumber.
Chrome attempts to provide you with the best input method possible based on the input type. In this case, number also has some extra abilities such as toggle up and down.
Chrome 尝试根据输入类型为您提供最佳输入法。在这种情况下，数字还具有一些额外的功能，例如上下切换。
The point of this, is if the number isn't valid, you will be able to detect that there are errors and also set the styling input[type=number]:invalid { background-color: red; }
这一点，如果数字无效，您将能够检测到有错误并设置样式 input[type=number]:invalid { background-color: red; }
回答by gdt
You could try ...
你可以试试...
<input type="text" pattern="[0-9]*" value="123456" />
<input type="text" pattern="[0-9]*" value="123456" />
which will enforce the entry of 0-9 on Firefox 4 on the desktop as well as an iPhone; I don't have Chrome at hand to try it on, but it should do the same.
这将强制在桌面版 Firefox 4 和 iPhone 上输入 0-9；我手头没有 Chrome 可以试用，但它也应该这样做。
回答by Dan Blows
Number is one of the new HTML5 input types. There are loads of these - email, date, time, url, etc. However, I think only Chrome has implemented them so far. The others fall back to using the default type (text).
Number 是一种新的 HTML5 输入类型。有很多这些 - 电子邮件、日期、时间、网址等。但是，我认为到目前为止只有 Chrome 实现了它们。其他人回退到使用默认类型（文本）。
For more info about HTML5 input types: http://diveintohtml5.ep.io/forms.html
有关 HTML5 输入类型的更多信息：http: //diveintohtml5.ep.io/forms.html
If you want to disable it on Chrome, you could leave as text and change it to number if the user device is a handheld. Since it's not a usability killer if the user device sniffing gives the wrong result, you shouldn't have any problems.
如果您想在 Chrome 上禁用它，如果用户设备是手持设备，您可以将其保留为文本并将其更改为数字。如果用户设备嗅探给出错误结果，这不是可用性杀手，因此您应该没有任何问题。
回答by Gabriel Ryan Nahmias
Refer to my answer for this similar question.
请参阅我对这个类似问题的回答。
I believe using <input type="tel" />is most logical for avoiding this pitfall currently. The other options are intriguing and slightly new to me (like the patternattribute) but I found them to be unsatisfactory for my design. You can look at a screenshot of a mobile application I complete for Hilton not too long ago here(it's actually shown in the answer I first referenced).
我相信目前使用<input type="tel" />是最合乎逻辑的避免这个陷阱。其他选项对我来说很有趣而且有点新（比如pattern属性），但我发现它们对我的设计并不满意。您可以在此处查看我不久前为希尔顿完成的移动应用程序的屏幕截图（它实际上显示在我第一次引用的答案中）。
回答by tiriana
Try this:
尝试这个：
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}
回答by Aristoteles
Why would you want to disable localized formatting? If you want a different format, just change the localization settings of your PC. Why would a user notbe interested to show a number in his or her local format? This is definitely not a bug in Chromebut a feature!
为什么要禁用本地化格式？如果您想要不同的格式，只需更改 PC 的本地化设置。为什么用户对以他或她的本地格式显示数字不感兴趣？这绝对不是 Chrome 中的错误，而是一个功能！
It seems to me you are not really using a "number" as input but rather a "text" code with a pattern. See the other posts for suggestions to that.
在我看来，您并没有真正使用“数字”作为输入，而是使用带有模式的“文本”代码。有关这方面的建议，请参阅其他帖子。
回答by hoekma
Here is a whole list of regular expressions that you can plug into the "pattern" attribute of the html input tag: HTML5 Pattern
下面是一个完整的正则表达式列表，您可以将其插入到 html 输入标签的“模式”属性中：HTML5 模式
Here is how I am using a pattern to format the number two decimal points:
这是我如何使用模式来格式化两个小数点：
<input type="number" pattern="\d+(\.\d{2})?" />
<input type="number" pattern="\d+(\.\d{2})?" />
Unfortunately it doesn't seem to work quite right on the iPad.
不幸的是，它在 iPad 上似乎不太正常。
