iOS下只读输入框无法唤起jQuery Datepicker的问题求助

问题根源在于iOS Safari的特殊处理逻辑：标记为readonly的输入框不会触发点击、焦点这类交互事件，而jQuery Datepicker默认依赖这些事件弹出日历弹窗，这就导致其他设备正常，但iOS上点击输入框毫无反应。

下面给出几个更优的替代方案，解决临时方案中光标可见、误导用户的问题：

方案一：移除readonly，阻止输入同时强制唤起日历 #

移除输入框的readonly属性，通过事件拦截手动输入操作，同时在焦点触发时直接唤起日历，再用CSS隐藏光标：

// 绑定焦点事件唤起日历，拦截键盘输入和粘贴操作
$("#stay-start")
  .on("focus", function() {
    $(this).datepicker("show");
  })
  .on("keydown paste", function(e) {
    e.preventDefault();
  });

/* 隐藏输入框光标，避免用户误以为可手动输入 */
#stay-start {
  caret-color: transparent;
}

这样输入框既无法手动输入内容，点击时能正常唤起日历，也不会显示光标误导用户。

方案二：保留readonly，用容器代理点击事件 #

给输入框套一个容器，监听容器的点击事件来唤起日历，输入框保持readonly状态（自然不会出现光标）：

<!-- 给输入框添加容器，样式可匹配输入框 -->
<div class="date-input-container" style="position: relative; display: inline-block; border: 1px solid #ccc; border-radius: 4px;">
  <input type="text" id="stay-start" readonly="readonly" style="border: none; outline: none; padding: 8px; width: 100%;">
</div>

// 点击容器时唤起日历
$(".date-input-container").on("click", function() {
  $("#stay-start").datepicker("show");
});

给容器设置和输入框一致的样式，用户会感觉就是点击输入框本身，体验更自然。

方案三：强制绑定点击事件触发日历 #

如果不想修改DOM结构，也可以尝试直接给readonly的输入框绑定点击事件，强制唤起日历（部分iOS版本可兼容）：

$("#stay-start")
  .datepicker()
  .on("click", function() {
    $(this).datepicker("show");
  });

内容的提问来源于stack exchange，提问作者Rachel