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设备提供数字布局,同时为其余的字母数字布局提供服务?