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

我知道如果用鼠标选择日期，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(); }); 

 $("#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设置了一个标志。 如果您需要，请查看我的完整文章以发送模糊和更改事件 。

 $("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 = $('' + appendText + ""); 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") ? $("") .addClass($.datepicker._triggerClass).attr({ src : buttonImage, alt : buttonText, title : buttonText }) : $('') .addClass($.datepicker._triggerClass) .html('ui-button')); 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事件中调用datepicker