电话：用于文本input的数字键盘
有没有办法强制数字键盘出现在<input type="text">手机上？ 我刚刚意识到HTML5中的<input type="number">是“浮点数”，所以不适用于信用卡号，邮政编码等。
我想模拟<input type="number">的数字键盘function，对于采用浮点数以外的数值的input。 有没有，也许，另一个适当的inputtypes呢？
你可以做<input type="text" pattern="\d*"> 。 这将导致数字键盘出现。
有关更多详细信息，请参阅此处： 适用于iOS的文本，Web和编辑编程指南
截至2015年年中，我相信这是最好的解决scheme：
<input type="number" pattern="[0-9]*" inputmode="numeric">
这会给你在Android和iOS上的数字键盘：
它还通过向上/向下箭头button和键盘友好的向上/向下箭头键递增，为您提供预期的桌面行为：
通过将type="number"和pattern="[0-9]* type="number"相结合，我们得到了一个无处不在的解决scheme，并且它向前兼容未来的HTML 5.1提出的inputmode属性。
注意：使用模式将触发浏览器的本机表单validation。 您可以使用novalidate属性禁用此function，也可以使用title属性自定义validation失败的错误消息。
如果您需要input前导零，逗号或字母（例如国际邮政编码），请查看此轻微变体 。
学分和进一步阅读：
http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-数字小键盘/
我发现，至less对于类似“密码”的字段，像<input type="tel" />这样的事情最终会产生最真实的以数字为导向的字段，而且它也有没有自动生成的好处。 例如，最近我为希尔顿开发的一个移动应用程序，我最终select了这样做：
…和我的客户非常感动。
使用type="email"或type="url"至less会在某些手机上给你一个键盘，比如iPhone。 对于电话号码，您可以使用type="tel" 。
使用<input type="text" pattern="\d*">来调出数字键盘是有危险的。 在firefox和chrome中，模式中包含的正则expression式会导致浏览器validation对该expression式的input。 如果模式不匹配或者留空，则会发生错误。 注意其他浏览器中的意外操作。
我认为type="number"是最好的语义网页。 如果你只是想改变键盘，你可以使用type="number"或type="tel" 。 在这两种情况下，iPhone都不会限制用户的input。 用户仍然可以键入（或粘贴）他/她想要的任何字符。 唯一的变化是显示给用户的键盘。 如果你想要超出这个限制，你需要使用JavaScript。
对我来说最好的解决办法是：
对于整数，在Android和iPhone上调出0-9垫
<label for="ting"> <input id="ting" name="ting" type="number" pattern="[\d]*" />
你也可能想这样做隐藏在firefox /铬/ safari spinners，大多数客户认为他们看起来丑陋
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance:textfield; }
并添加novalidate ='novalidate'您的表单元素，如果你做自定义validation
ps，以防万一你真的想要浮点数字，步骤到你想象的任何精度，将增加'。 到android
<label for="ting"> <input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />
你可以这样尝试：
<input type="number" name="input"> <input type="submit" value="Next" formnovalidate="formnovalidate">
但要小心：如果你的input包含的不是数字，它不会被传送到服务器。
在所有情况下，我找不到一种对我最好的types：我需要默认数字input（例如input“7.5”），但在某些时候允许使用文本（例如“pass”）。 用户需要一个数字小键盘（例如input7.5），但偶尔需要文本input（例如“pass”）。
相反，我所做的是添加一个checkbox的forms，并允许用户切换input（id =“inputSresult”）type =“number”和type =“text”之间。
<input type="number" id="result"... > <label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>
然后，我将一个点击处理程序连接到checkbox，根据是否选中上面的checkbox来切换文本和数字之间的types：
$(document).ready(function () { var cb = document.getElementById('cbAllowTextResults'); cb.onclick = function (event) { if ($("#cbAllowTextResults").is(":checked")) $("#result").attr("type", "text"); else $("#result").attr("type", "number"); } });
这对我们来说很好。
