iPhone/iOS:为邮政编码提供HTML 5键盘

Question

在移动设备上显示用于HTML 5输入(即<input>标签)的不同键盘有几种技巧.

例如,一些文档记录在Apple的网站上,为Web视图配置键盘.

这些对于可用性非常有用,但是当涉及到国际邮政编码的输入(主要是数字,但允许使用的字母)时,我们留下了一些糟糕的选择.大多数人建议使用pattern="\d*"技巧来显示数字键盘,但这不允许输入字母.

在type="number"输入型显示常规的键盘,但转移到了数字布局:

这适用于iOS设备,但它使Chrome认为输入必须是数字,甚至改变输入的行为(上/下递增和递减值).

有没有办法让iOS默认为数字布局,但仍然允许输入字母数字？

基本上,我想要iOS行为,type="number"但我希望该字段的行为类似于桌面浏览器上的常规文本字段.这可能吗？

更新:

嗅探iOS的用户代理并使用type="number"输入类型不是一种选择.type="number"不适用于字符串值(如邮政编码),它有其他副作用(如剥离前导零,逗号分隔符等),使其不太适合邮政编码.

Answer 1

这会有用吗？

HTML:

<input type="tel" pattern="[0-9]*" novalidate>

这应该为您提供Android/iOS手机浏览器上的漂亮数字键盘,禁用桌面浏览器上的浏览器表单验证,不显示任何箭头旋转器,允许前导零,并允许桌面浏览器以及iPad上的逗号和字母.

Android/iOS手机:

桌面:

iPad的:

Answer 2

快速谷歌搜索发现了这个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');
});

在验证表单之前切换输入类型,显示正确的键盘而不会弄乱值.如果您只希望它在iOS上运行,您可能必须使用用户代理.

检测iOS时的Stackoverflow

Answer 3

浏览器目前没有正确的方法来表示邮政编码和信用卡号等数字代码.最好的解决方案是使用type='tel'它可以为您提供数字小键盘,并能够在桌面上添加任何字符.

键入text并pattern='/d'会给你一个数字小键盘,但只在iOS.

有一个属性的HTML5.1提议,inputmode允许您指定键盘而不管类型.但是,任何浏览器目前都不支持.

我还建议您查看Webshim polyfill库,该库具有用于这些类型输入的polyfill 方法.

Answer 4

iOS 11 中此问题的更新。您只需将模式属性 ( pattern="[0-9]*")添加到任何具有数字类型的输入即可获得数字键盘。

以下按预期工作。

<input type="number" pattern="[0-9]*">

这也有效。

<input type="number" pattern="\d*">

@davidelrizzo 发布了部分答案，但@Miguel Guardo 和@turibe 的评论提供了更全面的图片，但很容易错过。

Answer 5

这将使ios键盘的数字面显示为默认值并保持切换到字母边的能力.当html输入类型更改时,设备会更改键盘以匹配相应的类型.

(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

Answer 6

为什么不检查 HTTP 请求（用户代理）的标头，并向 iOS 设备提供数字布局，同时向其他设备提供字母数字布局？