jquery ui datepicker 将焦点放在输入上而不在 IE 中再次加载日历？答案

【问题标题】：jquery ui datepicker give focus to the input without loading the calendar again in IE?jquery ui datepicker 将焦点放在输入上而不在 IE 中再次加载日历？
【发布时间】：2011-01-12 00:01:10
【问题描述】：

我知道如果用鼠标选择日期，jquery ui datepicker 会失去焦点。我希望能够专注于该输入字段。所以我做了这样的事情

    $("#patientDob").live("click", function() {
              $("#patientDob").datepicker({
            onSelect: function() {

                this.focus();

            // selecting a date moves the page, so remove the href attribute

                $(".ui-datepicker a").removeAttr("href"); 

        },  

                        changeMonth: true,
                        changeYear: true,
                        duration: 'fast',
                        showOn: 'focus' 
    }).focus();
});

这确实将焦点放在输入字段上，但在 IE 中它会继续再次加载日历。它不会在 Firefox 或 chrome 中这样做。我如何能够在不在 IE 中一次又一次地加载日历的情况下将焦点放在输入字段上？

另外，如果我将输入字段设为只读，并且在 IE 中选择日期后，该字段会失去焦点，如果我尝试按退格键，它会将我带到以前访问过的页面。任何帮助表示赞赏！

【问题讨论】：

所以，你有 datepicker showOn 一个 fucus 事件，并且当他们点击 datepicker 时你有输入获得焦点。它当然会那样做。你为什么这样做？如果他们点击日期选择器，他们使用的是日期选择器而不是输入。唯一的其他选择是让日期选择器仅在他们单击日期选择器按钮而不是焦点时出现。
我这样做是因为日期选择器的输入字段是通过 ajax 加载的。我需要一种在输入字段上设置日期选择器的方法

标签： jquery internet-explorer jquery-ui datepicker

【解决方案1】：

我的解决方案使用 beforeShow 事件来取消 IE 的显示（因为它似乎在没有 Chrome 和 Firefox 中的 hack 的情况下可以正常工作）。 onSelect 和 onClose 在将焦点返回到输入框之前设置一个标志。如果需要，请参阅我对 also send blur and change events 的完整文章。

$("input.dateInput").datepicker({            
   /* fix buggy IE focus functionality */
   fixFocusIE: false,

   onSelect: function(dateText, inst) {
       this.fixFocusIE = true;
       $(this).focus();
   },
   onClose: function(dateText, inst) {
       this.fixFocusIE = true;
       this.focus();
   },
   beforeShow: function(input, inst) {
       var result = $.browser.msie ? !this.fixFocusIE : true;
       this.fixFocusIE = false;
       return result;
   }
});

【讨论】：

第二个this.focus();不应该是$(this).focus();吗？
[也发布到您的完整文章中]。通过隔离，我对 beforeShow 事件代码有疑问。在具有 2 个使用日历选择器的字段的表单中，包含 beforeShow 语句的字段最终被禁用。

【解决方案2】：

我和你有同样的问题。为了解决这个问题，我重写了 datepicker 的以下方法：

$.datepicker._attachments = function(input, inst) {
    var appendText = $.datepicker._get(inst, "appendText");
    var isRTL = $.datepicker._get(inst, "isRTL");

    if (inst.append) {
        inst.append.remove();
    }
    if (appendText) {
        inst.append = $('<span class="' + $.datepicker._appendClass + '">' + appendText + "</span>");
        input[isRTL ? "before" : "after"](inst.append);
    }
    input.unbind("focus", $.datepicker._showDatepicker);
    if (inst.trigger) {
        inst.trigger.remove();
    }
    var showOn = $.datepicker._get(inst, "showOn");
    if (showOn == "focus" || showOn == "both") {
        input.focus($.datepicker._showDatepicker);
    }
    if (showOn == "button" || showOn == "both") {
        var buttonText = $.datepicker._get(inst, "buttonText");
        var buttonImage = $.datepicker._get(inst, "buttonImage");
        inst.trigger = $($.datepicker._get(inst,"buttonImageOnly") ? $("<img/>")
                .addClass($.datepicker._triggerClass).attr({
                    src : buttonImage,
                    alt : buttonText,
                    title : buttonText
                })
                : $('<button type="button"></button>')
                .addClass($.datepicker._triggerClass)
                .html('<span class="ui-button-icon-left ui-icon ui-icon-calendar"></span><span class="ui-button-text">ui-button</span>'));
        input[isRTL ? "before" : "after"](inst.trigger);
        inst.trigger.click(function() {
            if ($.datepicker._datepickerShowing
                    && $.datepicker._lastInput == input[0]) {
                $.datepicker._hideDatepicker();
            } else {
                $.datepicker._showDatepicker(input[0]);
            }
            return false;
        });

        input.bind('focus', function(e) {
            if (!$.datepicker._datepickerShowing) {
                inst.trigger.trigger('click');
            }
        });

        input.bind('click', function(e) {
            input.trigger('focus');
        });
    }
};


$.datepicker._selectDate = function(id, dateStr) {
    var target = $(id);
    var inst = $.datepicker._getInst(target[0]);
    dateStr = (dateStr != null ? dateStr : $.datepicker._formatDate(inst));
    if (inst.input) {
        inst.input.val(dateStr);
    }
    $.datepicker._updateAlternate(inst);
    var onSelect = $.datepicker._get(inst, "onSelect");
    if (onSelect) {
        onSelect.apply((inst.input ? inst.input[0]
        : null), [ dateStr, inst ]);
    } else {
        if (inst.input) {
            inst.input.trigger("change");
        }
    }
    if (inst.inline) {
        $.datepicker._updateDatepicker(inst);
    } else {
        if ($.datepicker._datepickerShowing) {
            inst.input.select();
        }
        setTimeout("$.datepicker._hideDatepicker()", 10);

        $.datepicker._lastInput = inst.input[0];
        $.datepicker._lastInput = null;
    }
};

检查它是否适合你...

【讨论】：

【解决方案3】：

在 document.ready 事件中调用 datepicker

【讨论】：