Html 在移动设备中使用正则表达式模式的 html5 输入类型编号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27103646/
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 with regex pattern in mobile
提问by UI_Dev
I'm trying to get regex pattern in input type numberto show only numbers and dots.
I tried something like this.
我试图在输入类型中获取正则表达式模式number以仅显示数字和点。我试过这样的事情。
<input type="number" pattern="[0-9.]*">
<input type="tel">
Both are showing only numbers (0-9), but not displaying . (dot). I need to use dot in input field.
两者都只显示数字 (0-9)，但不显示 . （点）。我需要在输入字段中使用点。
Is it possible thru html5? Or Shall I go with javascript?
可以通过 html5 吗？或者我应该使用javascript吗？
Note: This is working fine in Android, but . (dot) not displaying in iphones
注意：这在 Android 中运行良好，但是 . （点）不显示在 iphone 中
I need to display mobile keypad like this..
我需要像这样显示移动键盘..
Any help regarding this?
对此有任何帮助吗？
采纳答案by Mazzu
If you only specify "type=number" it will display keypad on iPhone like:
如果您只指定“type=number”，它将在 iPhone 上显示键盘，例如：
And if you specify pattern like <input type="number" pattern="\d*"/>or <input type="number" pattern="[0-9]*" />, then keypad on iPhone will be like :
如果您指定像<input type="number" pattern="\d*"/>或这样的模式<input type="number" pattern="[0-9]*" />，那么 iPhone 上的键盘将是这样的：
Still it cannot display dot(.), currently there is no pattern to handle such case.
仍然无法显示 dot(.)，目前没有处理这种情况的模式。
So you may opt for <input type="tel" />which will provide keypad like:
因此，您可以选择<input type="tel" />哪个将提供键盘，例如：
Please refer to below links for more details on inputs for iOS:
有关 iOS 输入的更多详细信息，请参阅以下链接：
http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
http://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types
http://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types
http://www.petefreitag.com/item/768.cfm
http://www.petefreitag.com/item/768.cfm
http://html5tutorial.info/html5-contact.php
http://html5tutorial.info/html5-contact.php
Hope this will help you. :)
希望这会帮助你。:)
Updates for customization(reference: https://stackoverflow.com/a/20021657/1771795)
自定义更新（参考：https: //stackoverflow.com/a/20021657/1771795）
You can do some customization using javascript.
Lets take example of currency input with decimals pattern in which e.whichto read CharCodeentered and then push it into an array (before) which represents digits before decimal mark and another array (after) to move values from (before) array past the decimal mark.
您可以使用 javascript 进行一些自定义。让我们以带小数模式的货币输入为例，在其中e.which读取CharCode输入，然后将其推入一个数组（之前），代表小数点之前的数字，另一个数组（之后）将值从（之前）数组移动到小数点之后。
HTML:
HTML：
<input type="tel" id="number" />
JS
JS
Variables and functions:
变量和函数：
// declare variables
var i = 0,
before = [],
after = [],
value = [],
number = '';
// reset all values
function resetVal() {
i = 0;
before = [];
after = [];
value = [];
number = '';
$("#number").val("");
$(".amount").html("");
}
// add thousand separater
function addComma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Main code:
主要代码：
// listen to keyup event
$("#number").on("keyup", function (e, v) {
// accept numbers only (0-9)
if ((e.which >= 48) && (e.which <= 57)) {
// convert CharCode into a number
number = String.fromCharCode(e.which);
// hide value in input
$(this).val("");
// main array which holds all numbers
value.push(number);
// array of numbers before decimal mark
before.push(value[i]);
// move numbers past decimal mark
if (i > 1) {
after.push(value[i - 2]);
before.splice(0, 1);
}
// final value
var val_final = after.join("") + "." + before.join("");
// show value separated by comma(s)
$(this).val(addComma(val_final));
// update counter
i++;
// for demo
$(".amount").html(" " + $(this).val());
} else {
// reset values
resetVal();
}
});
Reset:
重启：
// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
resetVal();
});
Result:
结果：
回答by amirhossein693
Not every input type and attribute is supported in all browsers. In general, most modern browsers from IE10+ include basics such as email and number.
并非所有浏览器都支持所有输入类型和属性。一般来说，大多数来自 IE10+ 的现代浏览器都包含基本信息，例如电子邮件和号码。
The browser will revert to a standard textinput when a specific type and ignore attributes when those values are not supported.
浏览器将在特定类型时恢复为标准文本输入，并在不支持这些值时忽略属性。
So you should use a good regular expression pattern.
所以你应该使用一个好的正则表达式模式。
for example
例如
<input type="tel" name="tel" pattern="^(?:\(\d{3}\)|\d{3})[- . ]?\d{3}[- . ]?\d{4}$" />
- 1234567899
- 123 456 7899
- 123-456-7899
- 123.456.7899
- 1234567899
- 123 456 7899
- 123-456-7899
- 123.456.7899
supported
支持的
Browser support for 'tel' type
'tel' 类型的浏览器支持
- Android (yes)
- iOS (yes)
- IE (yes)
- Mobile (yes)
- Opera (yes)
- Mobile (yes)
- Opera (yes)
- Classic (yes)
- Opera Mini(no)
- Firefox (yes)
- Mobile (yes)
- Chrome for Android (yes)
- 安卓（是）
- iOS （是）
- IE （是）
- 移动（是）
- 歌剧（是）
- 移动（是）
- 歌剧（是）
- 经典（是）
- Opera Mini （没有）
- 火狐（是）
- 移动（是）
- Android 版 Chrome （是）
(Sources: caniuse.com, DeviceAtlas, mobilehtml5.org)
（来源：caniuse.com、DeviceAtlas、mobilehtml5.org）
Browser support for pattern attribute
浏览器对模式属性的支持
But the pattern attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome. And is not supported in Internet Explorer 9 and earlier versions, or in Safari.
但 Internet Explorer 10、Firefox、Opera 和 Chrome 支持模式属性。并且在Internet Explorer 9 和更早版本或Safari 中不受支持。
回答by Rick
Unfortunately it's not possible to achieve the exact functionality that you're looking for is not possible. However there is a kind of "hack" available which will give similar functionality:
不幸的是，不可能实现您正在寻找的确切功能。然而，有一种“黑客”可用，它会提供类似的功能：
http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/(Link broken)
http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/（链接已断开）
It's a bit of JS which fills in the decimal automatically when the user starts typing, like this: 0.01 -> 0.12 -> 1.23 -> 12.34 . So this can be used for similar effect.
这是一个 JS 代码，它会在用户开始输入时自动填充小数，如下所示： 0.01 -> 0.12 -> 1.23 -> 12.34 。所以这可以用于类似的效果。
回答by Kildareflare
I had a similar scenario whereby I needed to support both comma and point as both the decimal mark and digit grouping [see here]
我有一个类似的场景，我需要同时支持逗号和点作为小数点和数字分组[见这里]
E.g.
1.00 / 1,00
1,000,000.00 / 1.000.000,00
例如
1.00 / 1,00
1,000,000.00 / 1.000.000,00
At the same time the scenario required that the number keypad was displayed on mobile devices.
同时，该方案要求在移动设备上显示数字键盘。
The initial implementation combined the 'number' type with the pattern attribute.
最初的实现结合了 'number' 类型和模式属性。
<input type="number" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />
However the number validation failed inputs that the pattern would allow. This meant the field and thus form were marked as invalid.
然而，数字验证失败了模式允许的输入。这意味着该字段和表单被标记为无效。
The solution was to change the type to 'tel'.
解决方案是将类型更改为“电话”。
<input type="tel" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />
Mobile users would now see a number keypad by default, and the pattern validation would be used to validate the input.
默认情况下，移动用户现在会看到一个数字键盘，并且模式验证将用于验证输入。
回答by Bookee Chunny
For iOS use the input attribute type="number", inputmode="decimal".
This will show the number pad with the “dots” on iOS 12.3+.
对于 iOS，请使用输入属性type="number", inputmode="decimal"。这将在 iOS 12.3+ 上显示带有“点”的数字键盘。
