iPhone / iOS：为邮政编码呈现 HTML 5 键盘

Posted 2023-03-05

【中文标题】iPhone / iOS：为邮政编码呈现 HTML 5 键盘

【英文标题】：iPhone / iOS : Presenting HTML 5 Keyboard for Postal Codes

【发布时间】：2014-10-15 00:27:11

【问题描述】：

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

例如，有些记录在 Apple 的网站上，Configuring the Keyboard for Web Views。

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

type="number" 输入类型显示常规键盘，但转换为数字布局：

这适用于 ios 设备，但它会让 Chrome 认为输入必须是数字，甚至会更改输入的行为（向上/向下递增和递减值）。

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

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

更新：

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

【问题讨论】：

我没有这个问题的答案，但我想知道 iOS 8 自定义键盘的新功能是否可以提供帮助。邮政编码优化的自定义键盘在这里会很有帮助。问题可能是如何从 WebView 抬起键盘。

我想我终于找到了满足您所有要求的解决方案。从去年开始，我已经将我的答案更新为，我认为，更好的东西。 ***.com/a/31619707/806956

@AaronGray 谢谢。已经接近了，但因为似乎在 iPhone 上禁用了字母字符，所以这仍然是一个未完成的问题。

啊，我明白了。 :-)

【参考方案1】：

这行得通吗？

HTML：

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

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

Android / iOS 手机：

桌面：

iPad：

【讨论】：

这似乎是最好的选择，但是这仍然不完全符合美国标准，因为键盘不提供 Zip+4 系统所需的破折号字符。也就是说，不需要或大量使用 Zip+4...en.wikipedia.org/wiki/ZIP_Code

我真的很喜欢它作为一个合理的通用解决方案，并自己使用它。一个警告是 novalidate 正式只是

【参考方案2】：

通过 Google 快速搜索发现 this *** question。

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 上运行，您可能必须使用用户代理。

*** on detecting iOS

【讨论】：

这绝对令人作呕，但也是我能找到的解决这个问题的最佳方法。我需要洗个澡。

这行得通，但它也会在您每次单击该框时清除表单。经过一些修改，这可能是最好的答案。

【参考方案3】：

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

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

有一个 HTML5.1 提议的一个名为 inputmode 的属性，它允许您指定键盘而不考虑类型。但是目前没有任何浏览器支持。

我还建议您查看 Webshim polyfill 库，其中包含用于这些类型输入的 polyfill method。

【讨论】：

pattern='/d' 对我不起作用，但 pattern='[0-9]*' 起作用。无论如何感谢您的提示

应该是pattern="\d*"

谈到输入模式..我可以将 type="text" 和 inputmode="numeric" 放在信用卡号的相同输入字段中，如下所示： 还是不符合语义甚至可能导致问题？

【参考方案4】：

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

以下按预期工作。

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

这也有效。

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

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

【讨论】：

数字下面有字母吗？

@Martian2049 是的。这是一个完整的 DTMF 键盘。

【参考方案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

【参考方案6】：

试试这个：

<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 包含非数字字符时重置值。

基本想法是从this answer 偷来的:)

【参考方案7】：

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

【讨论】：

嗅探 iOS 的用户代理并使用 type="number" 输入类型不是一个好的选择。 type="number" 不适用于字符串值（如邮政编码），它还有其他副作用（如去除前导零、逗号分隔符等），使其不太适合邮政编码。更不用说，嗅探用户代理会使实现变得脆弱。