12

このコードを使用するIEでのみ

$('#datepicker').datepicker({
    onSelect : function(x, u){
     $(this).focus();   
    }
});

$(this).focus();日付を選択すると、を追加したため、datepickerが再び開きますonSelect。この問題を解決するにはどうすればよいですか？（例）

jquery1.8.2とjquery-ui1.9を使用しています

4

7 に答える 7

12

私は今日この問題に遭遇し、私のために別の解決策を試しました。私のシナリオは、DatePickerがjQueryUIダイアログポップアップ内にあるというものでした。Chromeではすべて正常に機能しましたが、IEでは、日付を選択するとカレンダーが常に再表示されていました。

結局のところ、jQuery 1.10.1にはこれに関する未解決のバグがあります：http：//bugs.jqueryui.com/ticket/9125

IEのバグを示すためにリンクされたJSFiddleもあります。これをIEで機能させるには、次の2つの方法があります。

  1. modalに設定false
  2. 日付選択の直後に別の要素に焦点を当てる

私は＃2を使用しましたが、修正の例を次に示します（JSFiddleコードを更新するだけです）。

マークアップ：

<div id="dialog">
    <input id="datepicker" />
    <input type='button' value='save' id='btnSave'/>    
</div>

JS：

$( "#datepicker" ).datepicker({onSelect: function() { $('#btnSave').focus(); }});
$( "#dialog" ).dialog({ modal: true });

うまくいけば、これは将来誰かを助けるでしょう！

于 2013-09-23T16:22:16.263 に答える
10

これは私が得ることができる最良の回避策です：

（このリンクからインスピレーションを得た）

jsFiddle

$('#datepicker').datepicker({
            /* fix buggy IE focus functionality */
            fixFocusIE: false,    
            onSelect: function(dateText, inst) {
                  this.fixFocusIE = true;
                        $(this).change().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;
            }
}).click(function(){$(this).focus()});

質問で提案したように、jquery-UI1.9.0を使用していることに注意してください。サンプルでは、​​一部のイベント（IEのbeforeShow（）など）でバグがあることがわかっているjquery-ui1.8.15を使用していました。

于 2012-10-22T13:14:28.117 に答える
5

私はこれをIEに使用します、それは日付ピッカーの再開も停止します

JQuery：

        onSelect: function(){ 
        $("#focusfix").focus();
    },

HTML（ダイアログdivの最初の行）：

<input class="ui-helper-hidden-accessible" id="focusfix" type="text"autofocus/>
于 2016-03-24T17:55:27.567 に答える
3

.browserjQuery 1.9の後に削除されたので、コードを少し変更する必要がありました。これは私のために働きます：

$('#datepicker').datepicker({
    /* fix buggy IE focus functionality */
    fixFocusIE: false,    
    onSelect: function(dateText, inst) {
          this.fixFocusIE = true;
                $(this).change().focus();
    },
    onClose: function(dateText, inst) {
          this.fixFocusIE = true;
          this.focus();
    },
    beforeShow: function(input, inst) {
          var result = true;
          if (navigator.appName == 'Microsoft Internet Explorer') {
            result = !this.fixFocusIE;
          }
          this.fixFocusIE = false;
          return result;
    }
}).click(function(){$(this).focus()});
于 2013-12-18T09:35:14.770 に答える
0

これを試して：

$('#datepicker').datepicker({
onSelect : function(x, u){
 $(this).focus(); 
   $(this).datepicker("hide");     
},
onClose: function(e){
e.preventDefault();
}
});

これがフィドルですhttp://jsfiddle.net/VZts7/69/

またはIE8の場合：

$('#datepicker').datepicker({
onSelect : function(x, u){
 $(this).focus();     
},
onClose: function(e){
(this).datepicker("hide");   
}
});

完璧な解決策ではない場合でも、フィドルの動作を参照してくださいhttp://jsfiddle.net/hv77F/2/

于 2012-10-22T12:40:35.257 に答える
0

IE<=9でのjQuery>1.9のソリューション

{fixFocusIE: false},    
        {onSelect: function(dateText, inst) {
              this.fixFocusIE = true;
              $(this).change().focus();

            }
        },
        {onClose: function(dateText, inst) {
              this.fixFocusIE = true;
              this.focus();

            }
        },
        {beforeShow: function(input, inst) {
              var result = isIE ? !this.fixFocusIE : true;                      
              this.fixFocusIE = false;                      
              return result;
         }

function isIE() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0)      
           return true;
        else                 

        return false;
    }
于 2014-07-14T19:43:50.013 に答える
0

ネクロマンシング。
ここで述べた答えがどれもうまくいかなかったことを除いて、私は同じ問題を抱えていました。
作業しなければならないコードがiframeで機能するためかもしれませんが、今はわかりません。
その上、最新バージョンに更新できませんでした。これは、作業しなければならなかったプロジェクトの他の部分との互換性が失われるためです。
だからこれは私のためにそれを修正したものです：

initDatePicker: function ()
{
    // Initialize datepicker 
    var qs = document.getElementsByClassName("datepick");
    for (var i = 0; i < qs.length; ++i)
    {
        $(qs[i]).datepicker(
        {
            // showOn: "button"
            // showOn: "both"
              showOn: "focus"
            , buttonImage: "../images/cal.gif"
            , buttonImageOnly: true
            //, buttonImageOnly: false
            , dateFormat: 'dd.mm.yy'
            , changeMonth: true
            , changeYear: true
            , showWeek: false // true
            , firstDay: 1
            , showOtherMonths: true //false 
            , selectOtherMonths: true
            , showButtonPanel: true


            //,onSelect : function(x, u){
            //    // $(this).focus(); 

            //    window.setTimeout(function () { $("#txtSchulungsTyp").focus(); $(this).datepicker("hide"); }, 300);
            //},
            //onClose: function(e){
            //    // e.preventDefault();
            //    e.preventDefault ? e.preventDefault() : e.returnValue = false;
            //    return false;
            //}



            , onSelect: function ()
            {
                $(this).datepicker('disable');
            }
            , onClose: function ()
            {
                window.setTimeout(function (e)
                {
                    $(e).datepicker('enable')
                }.bind(undefined, this), 500)
            }

        })
        ; // End datepicker


        // console.log(mGlobalLanguage);

        // $(qs[i]).datepicker("option", $.datepicker.regional['de']);  
        // $(qs[i]).datepicker("option", $.datepicker.regional['FR']);
    } // Next i 
}
于 2017-06-01T14:32:37.740 に答える