Làm cách nào để bỏ qua các mục khi tabbing mà không sử dụng tabindex?

Question

Có cách nào tốt, trong trình xử lý javascript onfocus(), để trampoline tập trung vào mục tiếp theo trong thứ tự tab, mà không phải nhập thủ công ID của mục cần được tiếp theo?

Tôi đã tạo bộ chọn ngày HTML trong Django/jQuery. Đó là một chỉnh sửa dòng theo sau là biểu tượng lịch bật lên lịch. Tôi muốn có thể tab từ chỉnh sửa dòng sang đầu vào tiếp theo, bỏ qua liên kết cho biểu tượng lịch. Tôi có nghĩa là cho nó là một widget tổng quát, vì vậy tôi không thể hardcode id của bất cứ điều gì là tiếp theo và gọi .focus(). Tôi biết tôi có thể thiết lập thuộc tính tabindex trên tất cả mọi thứ, nhưng đó là hướng dẫn sử dụng nhiều hơn tôi muốn. Ngoài ra, iirc, điều đó sẽ không ngăn nó lấy trọng tâm, nó sẽ chỉ đặt nó vào cuối thứ tự tab.

Answer 1

Có thể:

$("#your-calendar-icon").focus(function() { 
    $(this).trigger("blur"); 
); 

Answer 2

Sử dụng một div xung quanh biểu tượng lịch thay vì một liên kết. Sau đó đính kèm các sự kiện lịch của bạn vào div. Theo mặc định, div sẽ không phải là điểm dừng tab.

Answer 3

Kiểm tra các nguồn lực này:

• Getting, setting, and removing tabindex values with JavaScript
• jQuery Tabindex Plugin

Answer 4

hay:

$("#your-calendar-icon").focus(function() { 
    $(somethingElse).trigger("focus"); 
}); 

Answer 5

Nếu nó luôn luôn sẽ là đầu vào sau khi lịch thì tại sao không:

$('#your-calendar-icon').focus(function() { 
    $(this).next('input').focus(); 
}); 

Cá nhân, tôi muốn nói rằng nếu đó sẽ là một plugin, bạn chỉ cần tạo phần tử tiếp theo là tùy chọn cấu hình có mặc định và chỉ định mặc định trong tài liệu.

Answer 6

Đặt tabindex = "-1" cho điều khiển và trình duyệt đó sẽ bỏ qua điều khiển đó từ tabbing.

Answer 7

Như @thetacom nói, bạn chỉ có thể sử dụng một loại phần tử khác, một yếu tố không nhận được tiêu điểm. Trong trường hợp bạn vẫn muốn giữ một số chức năng tab, bạn có thể thử SkipOnTab.

SkipOnTab: Một plugin jQuery để miễn các trường biểu mẫu được chọn từ thứ tự tab chuyển tiếp.

Chỉ cần thêm data-skip-on-tab="true" vào biểu tượng bộ chọn ngày (hoặc các thành phần/vùng chứa khác) mà bạn muốn bỏ qua. Bạn vẫn có thể nhấp để kích hoạt công cụ chọn ngày hoặc quay lại bằng cách sử dụng shift - tab và sử dụng phím enter.

Xem the simple demo và the business case demo.