html5inputtypes数字与移动正则expression式模式
我试图得到正则expression式在inputtypesnumber只显示数字和点。 我尝试了这样的事情
<input type="number" pattern="[0-9.]*"> <input type="tel">
两者都只显示数字（0-9），但不显示。 （点）。 我需要在input字段中使用点。
是否有可能通过HTML5？ 或者我应该用javascript？
注意：这在Android中工作正常，但是。 （点）不显示在iPhone中
我需要像这样显示手机键盘
有关于此的任何帮助？
如果您只指定“type = number”，它将在iPhone上显示键盘，如下所示：
如果你指定的模式像<input type="number" pattern="\d*"/>或<input type="number" pattern="[0-9]*" /> ，那么iPhone上的键盘就会像：
仍然不能显示点（。），目前没有处理这种情况的模式。
所以你可以select<input type="tel" />这将提供键盘如下：
有关iOSinput的更多详细信息，请参阅以下链接：
http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
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://www.petefreitag.com/item/768.cfm
http://html5tutorial.info/html5-contact.php
希望这会帮助你。 🙂
自定义更新 （参考： https ： //stackoverflow.com/a/20021657/1771795 ）
你可以使用JavaScript做一些自定义。 让我们举一个十进制模式的货币input例子，在这个模式中，读取CharCodeinput的CharCode ，然后将它推入一个表示十进制标记前的数字的数组（之前），将数组（之前）小数点。
完成小提琴的链接
HTML：
<input type="tel" id="number" />
JS
variables和function：
// 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, ","); }
主要代码：
// 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(); } });
重启：
// clear arrays once clear btn is pressed $(".ui-input-text .ui-input-clear").on("click", function () { resetVal(); });
结果：
并非所有浏览器都支持所有inputtypes和属性。 一般来说，来自IE10 +的大多数现代浏览器都包含诸如电子邮件和电话号码等基础知识。
浏览器将在特定types时恢复为标准文本input，并在不支持这些值时忽略属性。
所以你应该使用一个好的正则expression式模式。
例如
<input type="tel" name="tel" pattern="^(?:\(\d{3}\)|\d{3})[- . ]?\d{3}[- . ]?\d{4}$" />
- 1234567899
- 123 456 7899
- 123-456-7899
- 123.456.7899
支持的
浏览器支持“tel”types
- Android （是）
- iOS （是）
- IE （是）
- 移动（是）
- 歌剧（是）
- 移动（是）
- 歌剧（是）
- 经典（是）
- Opera Mini （no）
- Firefox （是）
- 移动（是）
- 适用于Android的Chrome （是）
（来源：caniuse.com，DeviceAtlas，mobilehtml5.org）
浏览器支持模式属性
但是在Internet Explorer 10，Firefox，Opera和Chrome中支持模式属性。 并且在Internet Explorer 9及更早版本或Safari中不受支持。
不幸的是，不可能实现你正在寻找的确切function是不可能的。 然而，有一种“黑客”可以提供类似的function：
http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/
当用户开始input时，它会自动填充小数点，如下所示：0.01 – > 0.12 – > 1.23 – > 12.34。 所以这可以用于类似的效果。
我有一个类似的情况，我需要同时支持逗号和点作为小数点和数字分组[见这里]
例如
1.00 / 1,00
1,000,000.00 / 1.000.000,00
同时该场景要求在移动设备上显示数字小键盘。
初始实现将“数字”types与模式属性相结合。
<input type="number" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />
但是，模式允许的数字validation失败的input。 这意味着该领域，因此forms被标记为无效。
解决方法是将types更改为“tel”。
<input type="tel" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />
移动用户现在默认会看到数字键盘，模式validation将用于validationinput。