2012-04-04 31 views
6

Tôi đang sử dụng tiện ích bổ sung ngày/datetimepicker Jquery, cũng như JQgrid. Tôi muốn onShow cho ngày/datetimepicker là 'nút', nhưng khi tabbing thông qua phương thức, nút ngày/datetime không được lấy tiêu điểm.Nút datepicker Jquery tabindex

Iv'e đã ​​viết một hàm để tạo datepicker cho tôi.

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: "_" }); 
} 

Tôi gọi nó là như thế này.

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

đang 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 } }, 

tôi thấy rằng datepicker render như thế này

<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> 

Vì vậy, ý tưởng ban đầu của tôi là để bám vào lớp nút và sử dụng jquery để chuyển đến phần tử tiếp theo (đầu vào) trên trang, bất kể nó là gì.

Tôi đã thử một vài điều, tất cả năng suất hoặc không chính xác/không có kết quả gì cả ...

cuối cùng nỗ lực của tôi đã thất bại ...

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

Bất kỳ trợ giúp sẽ được đánh giá cao .. rất nhiều :)

Trả lời

3

Cách trực tiếp nhất để giải quyết vấn đề dường như tôi để thiết lập tabindex để "-1":

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

Cố gắng sử dụng Tab trong thanh công cụ tìm kiếm của the demo và so sánh kết quả với another demo tạo ra cho the answer.

+1

aha! tôi đã thử điều tabindex -1 trước đó, nhưng đã có ý tưởng không biết cách thêm nó vào nút thông qua jquery. cảm ơn câu trả lời lần nữa. –

+0

@Yenros: Bạn được hoan nghênh! – Oleg

+0

liên kết đó bị hỏng. Ngoài ra, thiết lập tabindex doesnt dường như làm việc trên samsung galaxy s4. –

1

Vì vậy, ý tưởng ban đầu của tôi là chốt vào lớp nút và sử dụng jQuery để chuyển đến phần tử nhập tiếp theo trên trang, bất kể nó là gì.

+3

Tôi không nói dối, sự khôn ngoan của bạn làm tôi bối rối ..:/ –