Html HTML5 Input type=number 删除前导零
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8437529/
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
HTML5 Input type=number removes leading zero
提问by Evan
In Chrome 15, when using the element as a text field, leading zeros (e.g. 011) are removed even if the number entered does not break the validation rules (e.g. min, max). Is there an attribute to force the zero to remain in the field after it loses focus? The application for this is numeric data such as international phone prefixes.
在 Chrome 15 中，当将该元素用作文本字段时，即使输入的数字不违反验证规则（例如 min、max），也会删除前导零（例如 011）。有没有强制零在失去焦点后留在场上的属性？此应用程序是数字数据，例如国际电话前缀。
回答by Lar
<input type="text" pattern="[0-9]*" ...
<input type="text" pattern="[0-9]*" ...
that should do it for you. Will bring up the numeric keypad on iPhone and the nicer Android phones I've tested on.
这应该为你做。将在 iPhone 和我测试过的更好的 Android 手机上调出数字键盘。
回答by Dennis Traub
<input type="tel">has been introduced for this exact purpose. It's one of the new input types in HTML5.
<input type="tel">正是为此目的而引入的。它是 HTML5 中新的输入类型之一。
回答by Guillaume Gendre
I needed it for mobiles browsers and I used a mix of both solutions like this :
我需要它用于移动浏览器，并且我使用了两种解决方案的混合，如下所示：
<input type="tel" pattern="[0-9]*">
On iOS, the numeric keyboard appear with only numbers available (no # or * symbols) whereas on Android phones, the "tel" is correctly interpreted but not the pattern (not yet on the few phones I have).
在 iOS 上，数字键盘只显示可用数字（没有 # 或 * 符号），而在 Android 手机上，“tel”被正确解释，但不是模式（在我拥有的少数手机上还没有）。
I guess that when android browsers will start to implement "pattern" attribute, this should work fine on android too (as the whatwg spec suggests).
我猜当 android 浏览器将开始实现“模式”属性时，这也应该在 android 上正常工作（正如whatwg 规范所建议的那样）。
Until then you will have to check for non numeric characters in your input and remove them. javascript replace(/[^0-9*]/g,'') is useful for this.
在此之前，您必须检查输入中的非数字字符并将其删除。javascript replace(/[^0-9*]/g,'') 对此很有用。
hope this helps
希望这可以帮助
回答by Just Shadow
8 Years later...
8年后...
Beware:
The answers with usage of type="tel"don'tfully solve the issue especially in case of numeric fields where you might want to write floating/decimal numbers and other allowed characters (like +-.,).
请注意：
使用的答案type="tel"并不能完全解决问题，尤其是在您可能想要写入浮点数/十进制数和其他允许的字符（如 +-.,）的数字字段的情况下。
Solution:
Consider using text input with pattern and inputmode like this:
解决方案：
考虑使用带有模式和输入模式的文本输入，如下所示：
<input type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">
Details:
The pattern there will help to keep leading 0s, and behave like numeric field (with all the other allowed characters).
And the inputmode="numeric"will pull numeric keyboard instead of the default one.
详细信息：
那里的模式将有助于保持前导 0，并表现得像数字字段（所有其他允许的字符）。
并且inputmode="numeric"将拉数字键盘而不是默认键盘。
回答by Evan
The answer WHATWG provided me in IRC was that for non-numeric (e.g. not float/int) data that is numeric in nature, text is generally the correct type of input to use. The expection is if you are using something where a specific input type (e.g. telephone numbers, dates) already exists.
WHATWG 在 IRC 中为我提供的答案是，对于本质上是数字的非数字（例如不是 float/int）数据，文本通常是要使用的正确输入类型。期望是，如果您正在使用已经存在特定输入类型（例如电话号码、日期）的东西。
input type=number should only be used for inputs that are literally numbers (int), and not data that uses numerals (such as postal codes).
input type=number 应该只用于字面上数字 (int) 的输入，而不是使用数字的数据（例如邮政编码）。
