Jquery datepicker 按钮 tabindex

Question

我正在使用 Jquery 日期/日期时间选择器插件以及 JQgrid。 我希望日期/日期时间选择器的 onShow 是“按钮”，但是当通过模式切换时，日期/日期时间按钮不能获得焦点。

我写了一个函数来为我创建日期选择器。

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();
    });

任何帮助将不胜感激..很多:)

Answer 1

解决问题最直接的方法似乎是我将tabindex设置为“-1”：

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

尝试使用the demo的搜索工具栏中的Tab，并将结果与​​为the answer创建的another demo进行比较。

Answer 2

所以我最初的想法是锁定按钮类并使用 jQuery 跳转到页面上的下一个输入元素，无论它是什么。