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”，而不是“到达”
• 然后必须在桌面上使用默认的日期选择器，这实际上并不那么吸引人，至少与我目前拥有的相比

- Luke Twomey

---

现在有一个常见的问题，过去10年来针对基于个人电脑的Web开发所构建的许多优秀的Web库都无法在新的320像素宽度的智能手机平台上使用。 - Andrew Koper

你解决了吗？我在使用Angular和jQuery UI日期选择器时遇到了同样的问题，但是在iPad上似乎没问题。 - Theodor Solbjørg

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/，它似乎并不完全功能齐备，但可以传达出一些想法。

- Theodor Solbjørg