jQuery ui datepicker 在 IOS 外部单击时不会消失答案

【问题标题】：jQuery ui datepicker doesn't disappear on clicking outside on IOSjQuery ui datepicker 在 IOS 外部单击时不会消失
【发布时间】：2023-03-26 07:58:01
【问题描述】：

我在我的 PHP 站点中添加了 jquery datepicker。在 IOS 上单击外部时，日期选择器不会消失。它在桌面上运行良好。有人遇到过这个问题吗？

【问题讨论】：

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

你的日期选择器有类 hasDatepicker，所以试试这个：

$(".hasDatepicker").blur(function(e) { $(this).datepicker("hide"); });

与我想到的其他方式相比，它相对较短。

$(document).click(function(e) { 
   var ele = $(e.toElement); 
   if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length)
   $(".hasDatepicker").datepicker("hide"); 
});

我遇到的问题是能够知道什么时候点击了 span 图标，它并不是真的想合作，因此额外的有类检查

【讨论】：

我已经尝试过了，但这会产生问题。我在同一页面中有多个日期选择器字段。
如果您使用的是类而不是 id，则多个日期选择器不会产生任何问题
我再次尝试了您提供的第二个代码。但问题仍然存在于 iOs 上。当我点击/触摸其他地方（如标签、空白空间等）时，日期选择器不会消失。当我点击其他字段时，它会消失。

【解决方案2】：

我使用了这个解决方案，可能不是最好的，但它对我有用。欢迎反馈

CSS：

#backdrop {visibility:hidden;z-index: 5;position:fixed;background-color:#000;height:100%;width:100%;top:0px;left:0px;margin:0px;padding:0px;}

将z-index 调整为适当的值，确保#backdrop（未隐藏时）位于其他元素的前面，并且 Datepicker 在堆栈顺序中最高

JQuery:

$jq('#elementid').datepicker({
            beforeShow: function(){
                if (navigator.userAgent.match(/(iPod|iPhone|iPad)/) && !window.MSStream) {
                   if ($('backdrop') == null) {
                        var screen = new Element('div', {'id': 'backdrop'});
                        document.body.appendChild(screen);
                   }
                   Event.observe('backdrop', 'click', function() {
                        $jq("$jq('#elementid').").datepicker("hide");
                   });
                   $jq('#backdrop').css({'visibility': 'visible', 'opacity': '0'}); //adjust visible opacity if required
            },
            onClose: function(){
                if ($('backdrop') != null) {
                        $jq('#backdrop').css({'visibility': 'hidden', 'opacity': '0'});
                   }
            }
});

【讨论】：