2011-01-12 7 views
3

日付がマウスで選択されている場合、jquery ui datepickerはフォーカスを失います。私はその入力フィールドに焦点を当てることができるようにしたい。だから私はこの jquery ui datepickerはIEにカレンダーを再度ロードせずに入力にフォーカスを移しますか?

$("#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で日付を選択すると、フィールドのフォーカスが失われ、バックスペースを押すと以前に訪れたページに移動します。 ご迷惑をおかけして申し訳ございません。

+1

だから、あなたはfucusイベントのdatepicker showを持っていて、datepickerをクリックすると入力がフォーカスされます。もちろんそれはそうするでしょう。どうしてそんなことをするのか?日付ピッカーをクリックすると、入力ではなく日付ピッカーが使用されます。唯一の他の選択肢は、フォーカスの代わりに日付ピッカーボタンをクリックしたときにのみ、日付ピッカーを表示させることです。 – dqhendricks

+0

これは、datepickerの入力フィールドがaughに読み込まれているためです。入力フィールドにdatepickerを設定する方法が必要です – kd44

答えて

-1

document.readyイベントのコール日付ピッカー

1

私はあなたと同じ問題を抱えていました。それを解決するために、私は、日付ピッカーの次のメソッドをオーバーライドします。それはあなたのために働く場合

$.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

私のソリューションは、大丈夫動作しているようですので、(IEのためのショーをキャンセルするbeforeShowイベントを使用しています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; 
    } 
}); 
+0

2番目の 'this.focus();'は '$(this).focus();'にするべきではありませんか? – Simon07

+0

[あなたの完全な執筆にも投稿]分離して、私はbeforeShowイベントコードに問題があります。カレンダー選択ツールを使用する2つのフィールドを持つフォームでは、beforeShowステートメントを含むフィールドが無効になります。 – Jerome

関連する問題