如何关闭网页上指定输入字段的 iPhone 键盘答案

【问题标题】：How to turn off iPhone keypad for a specified input field on web page如何关闭网页上指定输入字段的 iPhone 键盘
【发布时间】：2012-04-06 09:53:51
【问题描述】：

我正在为信用卡到期字段使用月份选择器输入（类似于 jQuery UI 日期选择器）。

我需要禁用 iPhone 键盘，因为它隐藏了月份选择器。

我尝试将该字段设置为只读，但这不是一个可接受的解决方案 - 在 Safari iOS 5.1 中，只读字段在键盘导航中被跳过（键盘上的上一个/下一个按钮）。模糊字段也是不可接受的，因为它会触发验证（我们也在使用 jQuery 验证）。

有没有办法在不将其设置为只读或模糊的情况下关闭单个字段上的 iPhone 键盘？

【问题讨论】：

标签： javascript iphone keyboard iphone-keypad

【解决方案1】：

我还没有遇到隐藏键盘的方法。但是你有没有想过显示“输入”的替代方式。一种选择是使用 <input type="month" />，它在 iOS5 中引入了本机月份选择器。

第二个选项是样式，例如。 span 元素作为输入元素（-webkit-appearance 在 iOS 上不起作用），并为该元素添加 tabindex。这也可以工作，虽然我不知道你使用的月份选择器。

第三个选项 - 在手动触发模糊字段时，您不能阻止验证过程吗？

【讨论】：

不错！ <input type="month"/> 为 iPhone 提供了更好的月份选择器。 Opera 11.6 会弹出一个完整的日期选择器，所以我必须以某种方式解决这个问题。这没有按要求回答问题，但看起来它解决了问题。
所以我对 iPhone 和 iPod 进行了糟糕的用户代理检查，如果为真，则将 type 属性设置为“月”，如果为假，则仅加载月份选择器。效果很好。稍后我将使用 screensize + ontouchstart 而不是用户代理检查来重新访问。非常感谢！

【解决方案2】：

我在 Drupal 中遇到了同样的问题，输入字段将动态附加，所以我添加了一些 js，检查 Iphone/Ipad 并添加了“只读”属性

var checkUserAgent = navigator.userAgent;
    if (checkUserAgent.match(/iPad/i) || checkUserAgent.match(/iPhone/i)) {
        var checkBabyId1 = $('#babys_due_date_id').length > 0;
        if (checkBabyId1 == true) {
            $('#babys_due_date_id').find('input').prop('readonly', true);
        }
    }

【讨论】：