Trình chỉnh sửa ngày thanh công cụ jQuery: Định cấu hình phím tắt

Question

Tôi sử dụng jQuery UI datepicker để cho phép người dùng chọn một ngày. Nó có một số phím tắt để nó có thể được điều khiển bằng bàn phím:

page up/down  - previous/next month 
ctrl+page up/down - previous/next year 
ctrl+home   - current month or open when closed 
ctrl+left/right - previous/next day 
ctrl+up/down  - previous/next week 
enter    - accept the selected date 
ctrl+end   - close and erase the date 
escape   - close the datepicker without selection 

Nhưng có vẻ như không thân thiện với người dùng đối với tôi. Tôi không tự tìm ra cách chọn ngày bằng bàn phím cho đến khi tôi đọc nó trong tài liệu. Tôi đoán chỉ có vài người dùng sẽ phát hiện ra rằng họ phải nhấn "CTRL + phím mũi tên" để chọn một ngày.

Do đó, tôi muốn thay thế phím tắt bằng một số phím tắt khác. Đặc biệt tôi muốn người dùng không phải bấm phím "Control" khi điều hướng bằng các phím mũi tên giữa ngày và tuần.

Vì tôi không tìm thấy bất kỳ cấu hình nào về điều này trong tài liệu, I tried to achieve this aim using some custom javascript, nơi tôi nghe các sự kiện bàn phím và đặt ngày theo cách thủ công. Nhưng nó dẫn từ một vấn đề khác:

• Nó chỉ hoạt động tốt kể từ ngày đầu tiên được chọn
• Nó cản trở khi người dùng sử dụng "phím mũi tên CTRL +" sau khi điều hướng với các phím mũi tên chỉ
• ngày trong lĩnh vực đầu vào ngay lập tức được cập nhật, không giống như khi điều hướng với "CTRL + phím mũi tên" tầm kiểm soát bàn phím gốc của datepicker
• phím tắt khác của trình duyệt không làm việc vì event.preventDefault()

Tôi biết rằng tất cả các vấn đề này có thể được giải quyết bằng Javascript bổ sung một lần nữa, nhưng tôi thích nó nếu tôi chỉ có thể cấu hình bằng cách nào đó.

Có thể định cấu hình các phím tắt của trình chỉnh sửa ngày tháng của giao diện người dùng jQuery không?

Answer 1

Điều này không thể định cấu hình thông qua datepicker. Bạn sẽ phải thay đổi phương thức _doKeyDownsource here.

Cách dễ nhất để thực hiện việc này là mở rộng tiện ích. Nó sẽ giống như thế này:

$.extend($.datepicker, { 
    _doKeyDown: function(event){ 
      //copy original source here with different 
      //values and conditions in the switch statement 
    } 
}); 

Answer 2

bạn có thể kiểm tra add-on này: http://hanshillen.github.io/jqtest/#goto_datepicker

cho các tùy chọn khả năng tiếp cận nhiều hơn nữa.

Answer 3

Nếu là Jquery date picker thì theo mặc định, nó sẽ hỗ trợ tất cả các lối tắt này. Một vấn đề có thể có, tức là Theme. Bạn có thể sử dụng số CSS CDN được cung cấp trong số Jquery Trang web. Sau đó, tiêu điểm sẽ hiển thị ngay cả. Đó là một nhấp chuột tuyệt vời cho Trợ năng.

Answer 4

Nếu bạn muốn thay thế một trong những phím tắt và không thích đối phó mã từ kho lưu trữ trong trường hợp cập nhật jquery thư viện ui, sử dụng:

var doKeyDown = $.datepicker._doKeyDown; 
$.extend($.datepicker, { 
    _doKeyDown: function(event){ 
     console.log(event.which); 
     if(event.which !== $.ui.keyCode.ENTER) { 
      doKeyDown(event); 
     } 
     else { 
      //do something else 
     } 
    } 
}); 

Giữ một tài liệu tham khảo của _doKeyDown trước khi bạn ghi đè lên nó và gọi nó cho tất cả các phím tắt khác.