jquery datepicker button tabindex

Question

我正在使用Jquery date/datetimepicker加載項以及JQgrid。 我想onShow的日期/ datetimepicker是'按鈕'，但是當通過模式選項卡時，日期/日期時間按鈕不能獲得焦點。

Iv'e寫了一個函數來爲我創建日期選擇器。

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搜索工具欄，並將結果與​​創建another demo比較the answer。

Answer 2

所以我最初的想法是鎖定到按鈕類，並使用jQuery跳轉到頁面上的下一個輸入元素，而不管它是什麼。