iPhone / iOS：展示用于邮政编码的HTML 5键盘

在HTML 5输入（即<input>标签）的移动设备上显示不同的键盘有几种技巧。

例如，某些文件记录在Apple网站“配置Web视图的键盘”上。

这些对于可用性非常有用，但是在输入国际邮政编码（大多数为数字，但允许使用字母）时，我们会遇到一些较差的选择。大多数人建议使用该pattern="\d*"技巧来显示数字键盘，但这不允许输入字母。

的 type="number"输入类型节目的常规键盘，但转移到了数字布局：

这在iOS设备上效果很好，但让Chrome认为输入必须是数字，甚至可以更改输入的行为（上下移动并减小值）。

有什么方法可以让iOS默认使用数字布局，但仍然允许字母数字输入？

基本上，我希望iOS行为 type="number"但是我希望该字段的行为类似于台式机浏览器上的常规文本字段。这可能吗？

更新：

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

这样行吗？

HTML：

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

这将为您提供在Android / iOS手机浏览器上不错的数字键盘，在桌面浏览器上禁用浏览器表单验证，不显示任何箭头微调器，允许前导零，并在桌面浏览器和iPad上允许使用逗号和字母。

Android / iOS手机：

桌面：

iPad：

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

键入text并pattern='\d*'会给您一个数字键盘，但仅限于iOS。

对于名为的属性inputmode，有一个HTML5.1提议，该提议将允许您指定键盘，而不管类型如何。但是任何浏览器目前都不支持。

我还建议您看看Webshim polyfill库，该库具有针对这些类型的输入的polyfill方法。

快速的Google搜索发现了这个Stackoverflow问题。

的HTML

<input type="text">

Java脚本

$('input[type="text"]').on('touchstart', function() {
   $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
   $(this).attr('type', 'text');
});

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

检测iOS的Stackoverflow

默认情况下，这将使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

iOS 11中此问题的更新。您可以通过将pattern属性（pattern="[0-9]*"）添加到任何具有数字类型的输入中来获取数字键盘。

以下工作符合预期。

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

这也有效。

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

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

尝试这个：

<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设备上进行测试。

请注意，$this.attr('type', 'number')当使用input非数字字符时，这会重置值，因此可能会引起一些明显的故障。

基本想法从此答案中被盗:)

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