iPhone / iOS：为邮政编码呈现HTML 5键盘
在移动设备上显示HTML 5input（即<input>标签）的不同键盘有几种技巧。
例如，有些文件logging在苹果的网站上， configurationWeb视图的键盘 。
这对于可用性来说是很好的，但是当涉及到国际邮政编码（主要是数字，但允许字母）的input时，我们剩下一些差的选项。 大多数人推荐使用pattern="\d*"技巧来显示数字键盘，但不允许input字母。
type="number"inputtypes显示常规键盘，但转移到数字布局：
这适用于iOS设备，但它使Chrome认为input必须是一个数字，甚至改变input的行为（上/下递增和递减值）。
有没有办法让iOS默认数字布局，但仍然允许字母数字input？
基本上，我想要type="number"的iOS行为，但我希望该字段在桌面浏览器上的行为像一个常规的文本字段。 这可能吗？
更新：
嗅探iOS用户代理并使用type="number"inputtypes不是一个选项。 type="number"不适用于string值（如邮政编码），它还有其他副作用（如剥离前导零，逗号分隔符等），使其不太理想的邮政编码。
这会工作吗？
HTML：
<input type="tel" pattern="[0-9]*" novalidate>
这应该给你在Android / iOS手机浏览器上的漂亮的数字键盘，在桌面浏览器上禁用浏览器表单validation，不显示任何箭头旋钮，允许前导零，并允许在桌面浏览器，以及iPad上的逗号和字母。
Android / iOS手机：
桌面：
iPad的：
浏览器目前没有合适的方式来表示数字代码，如邮政编码和信用卡号码。 最好的解决scheme是使用type='tel' ，它会给你一个数字键盘和在桌面上添加任何字符的能力。
inputtext和pattern='/d'会给你一个数字键盘，但是只能在iOS上使用。
对于一个名为inputmode的属性，有一个HTML5.1提议，它允许你指定小键盘而不pipetypes。 但是目前不支持任何浏览器。
我也build议看一下Webshim的polyfill库，它有这些types的input的polyfill 方法 。
快速谷歌search发现这个Stackoverflow的问题 。
HTML
<input type="text">
使用Javascript
$('input[type="text"]').on('touchstart', function() { $(this).attr('type', 'number'); }); $('input[type="text"]').on('keydown blur', function() { $(this).attr('type', 'text'); });
在表单可以被validation之前切换inputtypes，显示正确的键盘而不会搞乱值。 如果您只希望它在iOS上运行，则可能必须使用用户代理。
检测iOS的Stackoverflow
这将默认情况下使ios键盘的数字面显示，并保持切换到按字母顺序的一面的能力。 当htmlinputtypes改变时，设备改变键盘以匹配适当的types。
(function ($) { var control = $('#test2'); var field = $('#test1'); control.bind('click', function () { if (control.is(':checked')) { field.attr('type', 'text'); } else { field.attr('type', 'number'); } }) }(jQuery)); <input type="number" id="test1" value="123" /> <input id="test2" type="checkbox" />Change
备用演示： http : //jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/
如果你想要大数字格式的键盘（电话风格），你可以相应地调整代码，它仍然工作：
(function ($) { var control = $('#test2'); var field = $('#test1'); control.bind('click', function () { if (control.is(':checked')) { field.attr('type', 'text'); } else { field.attr('type', 'tel'); } }) }(jQuery)); <input type="tel" id="test1" value="a" /> <input id="test2" type="checkbox" />Change
尝试这个：
<input type="text" name="postalcode" class="js-postal"> <script src="https://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { if('ontouchstart' in window) { // ensure we are in touch device. $('input.js-postal').on('focus', function() { var $this = $(this); // memorize current value because... var val = $this.val(); // this may cause reset value. $this.attr('type', 'number'); setTimeout(function() { // Asynchronously restore 'type' and value $this.attr('type', 'text'); $this.val(val); }, 0); }); } }); </script>
我知道这是非常黑客的方式，但这显然是有效的。
我还没有在Android设备上进行过testing。
注意，当$this.attr('type', 'number')时，这可能会导致一些明显的毛刺$this.attr('type', 'number')因为当input具有非数字字符时，这会重置该值。
基本的想法从这个答案被偷走了:)
在iOS 11中更新此问题。只需将模式属性（ pattern="[0-9]*" ）添加到具有数字types的任何input，即可获取数字键盘。
以下按预期工作。
<input type="number" pattern="[0-9]*">
这也适用。
<input type="number" pattern="\d*">
@davidelrizzo张贴了答案的一部分，但@Miguel Guardo和@turibe的评论给了一个更全面的图片，但很容易错过。
为什么不检查HTTP请求（用户代理）的标题，并向iOS设备提供数字布局，同时为其余的字母数字布局提供服务？
