マウスで日付を選択すると、JQuery UI Datepickerがフォーカスを失います

StackOverflow https://stackoverflow.com/questions/1401917

  •  05-07-2019
  •  | 
  •  

質問

datepickerでJQuery UIを使用しています。ユーザーがフィールドにタブで移動すると、カレンダーが適切にポップアップ表示されます。

  1. ユーザータブ（フィールドへのキーを介して
  2. ユーザーはマウスをクリックして日付を選択します
  3. ユーザータブ
  4. Tabindexは1つ（フォームの最初）からやり直します

ここにコードがあります。 （タブインデックスを設定することもできます）

<input type="text" name="demo" />
<input type="text" class="date" />

jqueryコードは次のとおりです。

$(".date").datepicker();

この問題を解決する方法についての提案（最短の解決策へのボーナス）？

役に立ちましたか？

解決

onClose または onSelect イベントにサブスクライブします：

$("#someinput").datepicker(
{
    // other options goes here
    onSelect: function ()
    {
        // The "this" keyword refers to the input (in this case: #someinput)
        this.focus();
    }
});

または onClose の場合：

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

他のヒント

提案のおかげで、ジェフ、onSelect関数を変更して、属性フィルターを使用して、＆quot; nexttab＆quot;で指定されたtabindexを持つ要素のみを取得するようにしました。

$(function(){
  $(".date").datepicker({
      onSelect: function(){
          currenttab = $(el).attr("tabindex");
          nexttab = currenttab * 1 + 1;
          $("[tabindex='" + nexttab + "']").focus();
      }
  });
});

PS： コードで指定されたtabindexesを持たない場合、以前に無視したように、単に次のコードを追加します。

$('input, select').each(function(i, val){
    $(this).attr('tabindex', i + 1);
});

この問題に関する議論は http://bugs.jqueryui.com/ticket/7266 でソリューションを http://jsfiddle.net/lankarden/9FtnW/

Jimmyのアプローチに似ていますが、これによりカレンダーアイコンにフォーカスが設定されます（カレンダーがアイコンを使用する場合）、複数の日付ピッカーが隣り合っている場合、この方法がより適切であることがわかりました。

カレンダーのポップアップが閉じたときにアイコンにフォーカスを設定するように、日付のデフォルトオプションを設定します。

    $(".date").datepicker({
        onClose: function() {
            $(this).next('a').focus(); 
        }
    });

カレンダーアイコンにタグを追加して、フォーカスできるようにします：

    $(".date").each(function() {
        $($(this).next('img')).wrap($("<A/>").attr("href","#"));
    });

タブオーダーを本当に気にしない場合、つまり、ページのフローに従うように割り当てられていない場合は、次のようにすることができます。

jQuery('.date').datepicker({
    'onSelect': function(){
        $(this).nextAll('input, button, textarea, a').filter(':first').focus();
    }
});

ユーザーが日付を選択すると、そのフィールドでの作業が終了し、次のフィールドに移動するという仮定に基づいて機能するため、単純に次のフィールドを選択します。

this はそのコールバックの関連する入力フィールドを参照するので、おそらく onClose イベントを使用して、datepickerが閉じるときにフォーカスを入力に戻すことができます。例：

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

同じボックスにフォーカスを置くと、最終的に日付ピッカーがポップアップ表示され、次のフィールドに移動することが本当に必要になります。考案されたソリューションは次のとおりです。

  1. tabindex属性をフィールドに設定する必要があります。
  2. これは、JavaScriptで文字列からintにキャストしています（* 1）。

  3. これにより、選択したフィールドが実際に現在のフォーカスではなく次の要素に移動します

    $(function(){
  $(".date").datepicker({
      onSelect: function(){
          currenttab = $(this).attr("tabindex");
          nexttab = currenttab * 1 + 1;
          $(":input").each(function(){
              if ($(this).attr("tabindex") == nexttab)
                 $(this).focus();
          });
  }
  });
});

この手法を改善するための提案を歓迎します。

私もこの問題を解決しなければならず、与えられた答えは私が探していたものと正確には一致しないことがわかりました。これが私がしたことです。

ブログはjQueryに言及しました画面上の次のフォーム要素を選択できる機能。これをプロジェクトにインポートし、datepickerダイアログのCloseで呼び出しました。

リンクが機能しなくなった場合の機能は次のとおりです

$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        return false;
    });
};

次に、単に日付ピッカーのonCloseで呼び出します

$(this).datepicker({
    onClose: function () {
       $(this).focusNextInputField();
    }
});

これが将来の訪問者に役立つことを願っています。

Enterキーを押すと（デフォルトで今日の日付が選択される）、またはこれを使用してカレンダーから日付をクリックすると、次の入力フィールドにフォーカスを移動できました

$(".jqDateField").datepicker('option', {
    dateFormat: 'mm/dd/y', onClose: function () {
        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
    }
});

これは、「方法」に選択ボタンまたは入力ボタンがある場合に、次のテキスト入力にフォーカスを設定するために必要になる場合があります

$(':input[type="text"]:eq(' + ($(':input[type="text"]').index(this) + 1) + ')')
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top