jquery-ui - Jquery を使用する Datepicker は、選択された日付の後にテキスト ボックスにフォーカスを失います。

Question

Jquery を使用する Datepicker は、選択された日付の後にテキスト ボックスにフォーカスを失います。jquery-ui-1.9.2 を使用しています。日付を選択すると、フォーカスがテキスト ボックスに表示されません。解決策はありますか?

Answer 1

以下のコードを使用してみてください。

HTML コード:
<input type="text" id="date"/>

JQuery:

$("#date").datepicker({
    onClose: function () {
     $(this).focus();  
    } 
});

JSFiddle1

編集:上記のコードには IE で問題があり、datepicker が閉じられません。このブログでは、より多くの情報を見つけることができます。

<script language='javascript' src="jquery-migrate-1.2.1.js"></script> // download and add this

$("#date").datepicker({            
   /* fix buggy IE focus functionality */
   fixFocusIE: false,   
   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;
   }
}); 

JSFiddle2

Answer 2

   $(".datepicker").datepicker({
        onClose: function () {
            $(this).parents().nextAll().find($(":input[type !='hidden']")).first().focus();

        }
    });
});

どんなにネストされていても、次の入力に焦点を当てる簡単な方法を見つけました。.find の後の条件を好きなようにいつでも交換でき、それに焦点が当てられます。

Answer 3

Praveenの答えを拡大する。私はそれに1つの問題がありました。IE の datepicker では、フィールドに焦点を合わせるたびに表示を拒否しました。

また、そのソリューションにはわずかな論理的な問題がありました (何も影響しませんでしたが、私の目にはまだ正しくありませんでした): fixFocusIE フィールドはオプションに設定されていますが、後で「this」で呼び出されます" は、options オブジェクトではなく DOM 要素を指します。つまり、基本的に 2 つの fixFocusIE があります。1 つはオプション (未使用) で、もう 1 つは DOM 要素自体です。

また、$.browser.msie が機能しなくなったため、独自の IE 検出器を発明する必要がありました。

私の作業コードは次のようになります。

var el = $("selector of element I need to assign to datepicker");
var options = {}; // actually I fill options from defaults and do some other manipulations, but I left it as empty object here for brevity

options.fixFocusIE = false;

function detectIE() {
    var ua = window.navigator.userAgent;

    if(ua.indexOf('MSIE ') > 0 || 
       ua.indexOf('Trident/') > 0 || 
       ua.indexOf('Edge/') > 0) {

       return true;
    }

    // other browser
    return false;
}    

/* blur() and change() are needed to update Angular bindings, if any */
options.onSelect = function(dateText, inst) {
    options.fixFocusIE = true;
    $(this).blur().change().focus();
};
options.onClose = function(dateText, inst) {
    options.fixFocusIE = true;
    this.focus();
};
options.beforeShow = function(input, inst) {
    var result = detectIE() ? !options.fixFocusIE : true;
    options.fixFocusIE = false;
    return result;
};

/* and this one will reset fixFocusIE to prevent datepicker from refusing to show when focusing the field for second time in IE */
el.blur(function(){
    options.fixFocusIE = false;
});

el.datepicker(options);

Answer 4

    $('.datepicker').datepicker(
     {

      onClose: function () {

        this.focus();
      }
 });

Answer 5

Doc Ready のすべての datepciker を初期化します