7

Jquery date/datetimepicker アドオンと JQgrid を使用しています。date/datetimepicker の onShow を「ボタン」にしたいのですが、モーダルをタブ移動するときに、date/datetime ボタンにフォーカスを移してはいけません。

日付ピッカーを作成する関数を作成しました。

function CreateDatePicker(elem, ShowOn) {
    setTimeout(function () {
        $(elem).datepicker({
            dateFormat: 'yy/mm/dd',
            autoSize: false,
            showOn: ShowOn,
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            showWeek: true,
            onClose: function (dateText, inst) {
                $(this).focus();
            }
        });
    }, 100);

    $(elem).mask("9999/99/99", { placeholder: "_" });
}

私はこう呼んでいます。

initDateEdit = function (elem) {
        CreateDatePicker(elem, 'button');
};

JQgrid コード

{ name: 'Date', index: 'Date', editable: true, formoptions: { rowpos: 1, colpos: 2 }, formatter: 'date', formatoptions: { newformat: 'Y/m/d' }, datefmt: 'Y/m/d', editoptions: { dataInit: initDateEdit }, searchoptions: { dataInit: initDateSearch } },

日付ピッカーがこのようにレンダリングされるのを見ました

<input type="text" id="Date" name="Date" role="textbox" class="FormElement ui-widget-content ui-corner-all hasDatepicker">
<button type="button" class="ui-datepicker-trigger">...</button>

そのため、私の最初のアイデアは、ボタン クラスにラッチし、Jquery を使用してページ上の次の (入力) 要素にジャンプすることでした。

私はいくつかのことを試しましたが、すべてが間違っているか、まったく結果が得られません...

最後に失敗した試み...

    $(document).delegate('.ui-datepicker-trigger', 'focus', function (event) {
        $(this).next().focus();
    });

どんな助けでも大歓迎です..たくさん:)

4

2 に答える 2

4

この問題を解決する最も直接的な方法は、tabindexを「-1」に設定することです。

setTimeout(function () {
    $(elem).datepicker({
        showOn: 'button',
        ...
    }).next('button.ui-datepicker-trigger')
      .attr("tabIndex", "-1");

Tabデモの検索ツールバーで使用して、結果を回答用に作成された別のデモと比較してみてください。

于 2012-04-04T11:20:32.310 に答える
1

そのため、私の最初のアイデアは、ボタン クラスに取り掛かり、jQuery を使用してページ上の次の入力要素にジャンプすることでした。

于 2012-04-04T10:48:13.513 に答える