javascript - Jquery 日期选择器按钮 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并将结果与​​ another demo 进行比较为 the answer 创建.