jQuery UI 日期选择器无法在 iOS 上运行

Question

我有一个带有几个日期字段的搜索表单，我很高兴在其中使用 jQuery UI 的日期选择器:

<input class="formFields datepicker" id="arrival" name="arrival" required="" placeholder="Arrival" readonly="true" type="text">
<input class="formFields datepicker" id="departure" name="departure" required="" placeholder="Departure" readonly="true" type="text">

$( ".datepicker" ).datepicker();

这会在桌面浏览器上产生相当漂亮、赏心悦目的日期选择器弹出窗口:

但由于某种原因，在 iPhone 和 iPad 上，点击字段没有任何作用。 Chrome 和 Safari 都是这种情况。

我使用以下方法来检查点击事件是否被识别(确实如此):

$(".datepicker").click(function(){
    alert("clicked me");
});

我还尝试修改输入字段以键入日期而不是文本:

<input class="formFields datepicker" id="arrival" name="arrival" required="" placeholder="Arrival" type="date">

但这并不能真正作为一个解决方案(实际上是促使我首先使用 jQuery 日期选择器的原因)，有几个原因。

• 无法识别占位符文本，因此该字段显示为空白或显示“mm/dd/yyyy”，而不是“到达”
• 默认的日期选择器必须在桌面上使用，这确实没有那么有吸引力，至少与我目前拥有的相比

Answer 1

可能有点晚了。

我通过注释掉一个bind('mousemove' ...)解决了这个问题，似乎该事件导致iOS Chrome和Safari(在我的例子中)无响应。

我注释掉了代码，代码又恢复正常了。但我需要在 PC 上使用 mousemove，因此我将 mousemove 包装在 if mobile 语句中。

if (window.innerWidth < 480) {
    $(document).bind('mousemove', function (e) {
       // something that work on PC.
    })
}

也许使用innerWidth 480来检测移动设备是愚蠢的。但它会让您了解如何解决这个问题。

如果绑定(bind)方法经常使用，您也可以包装它。有一个图书馆 http://touchpunch.furf.com/这似乎没有完全发挥作用，但它传达了这个想法。