Question

我知道如果用鼠标选择日期，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中选择日期后该字段失去焦点，如果我尝试按退格键，则会将我带到之前访问过的页面。任何帮助表示赞赏！

Answer 1

我的解决方案使用beforeShow事件来取消IE的节目（因为它似乎没有Chrome和Firefox的黑客攻击）。 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;
   }
});

Answer 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;
    }
};

检查它是否适合您......

Answer 3

在document.ready event

中调用datepicker

jquery ui datepicker在没有在IE中再次加载日历的情况下将焦点放在输入上？

3 个答案: