Safari bỏ qua tabindex

Question

Tôi có 2 nút bên cạnh hộp văn bản và hộp văn bản khác sau 2 nút. Tabindex cho hộp văn bản đầu tiên là 1000, nút đầu tiên là 1001 và nút thứ hai là 1002. Hộp văn bản thứ hai có tabindex là 1003.

Khi tôi nhấn tab, tabindex hoạt động tốt trong tất cả các trình duyệt ngoại trừ Safari, nơi nó ngay lập tức di chuyển từ hộp văn bản đầu tiên đến hộp văn bản thứ hai mặc dù tabindex đã được đặt đúng. Bất kỳ ý tưởng nào về cách ngăn chặn vấn đề này?

Answer 1

Theo truy cập tab mặc định bị tắt trong safari (!). Để bật tính năng này, hãy chọn tab "Tùy chọn> Nâng cao> Nhấn để đánh dấu từng mục trên một trang".

Answer 2

Tôi đã thử làm như sau với Safari 5.1.5. Tôi không biết cách hoạt động với các phiên bản cũ:

Khi "đánh dấu từng mục trên một trang" (xem câu trả lời bằng graphicdivine) bị vô hiệu hóa, bạn có thể sử dụng chức năng đó bằng cách nhấn Option (alt) + tab.

Nếu bạn không (và tùy chọn bị tắt), Safari sẽ theo tab mặc định thông qua tất cả các trường biểu mẫu (như đầu vào, văn bản, chọn ...). Đối với các trường này, nó cũng sẽ chấp nhận/xem xét một tabindex. Trước tiên nó sẽ tab thông qua tất cả các phần tử biểu mẫu với một tabindex (theo thứ tự của các chỉ mục đã cho) và sau đó thông qua phần còn lại của các phần tử biểu mẫu theo thứ tự định nghĩa của chúng trong HTML. Vì vậy, nếu bạn xác định một tabindex = "1" (hoặc 1001) và "3" (hoặc 1003) cho hai yếu tố đầu vào, Safari trước tiên sẽ tập trung vào các trường này và sau đó là các trường khác.

Answer 3

Làm Safari và một máy Mac truy cập:

kiểm tra trên máy Mac: System Preferences -> Keyboard -> Phím tắt (tab) -> Full Keyboard Access -> All Controls

Đối tác nhấn tab để làm việc trên Safari: Tuỳ chọn -> Nâng cao -> Nhấn tab để đánh dấu từng mục trên một trang (kiểm tra điều này)

Answer 4

Nếu bạn đang viết trang web của riêng mình, tôi sẽ sửa lỗi bằng jquery/javascript. Đây là những gì tôi đã sử dụng trên của tôi.

Hạn chế là bạn ngăn chặn hành vi khóa tab mặc định trên trang, đây có thể là vấn đề lớn hơn đối với khả năng truy cập trong một số trường hợp. Nhưng tôi nghi ngờ nó.

var Tab = {}; 
Tab.i = 1, 
Tab.items = 0; 

function fixTabulation() { 
    /* This can be used to auto-assign tab-indexes, or 
    # commented out if it manual tab-indexes have 
    # already been assigned. 
    */ 
    $('input, select, textarea').each(function(){ 
     $(this).attr('tabindex', Tab.i); 
     Tab.i++; 
     Tab.items++; 
    }); 

    Tab.i = 0; 

    /* We need to listen for any forward or backward Tab 
    # key event tell the page where to focus next. 
    */ 
    $(document).on({ 
     'keydown' : function(e) { 
      if (navigator.appVersion.match("Safari")) { 
       if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed 
        e.preventDefault(); 
        Tab.i != Tab.items ? Tab.i++ : Tab.i = 1; 
        $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus(); 
       } 
       if (e.shiftKey && e.keyCode == 9) { //Tab key pressed 
        e.preventDefault(); 
        Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items; 
        $('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus(); 
       } 
      } 
     } 
    }); 

    /* We need to update Tab.i if someone clicks into 
    # a different part of the form. This allows us 
    # to keep tabbing from the newly clicked input 
    */ 
    $('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) { 
     Tab.i = $(this).attr('tabindex'); 
     console.log(Tab.i); 
    }); 
} 

$(document).ready(function() { 
    fixTabulation(); 
}); 

Đây không phải là giải pháp hoàn hảo, nhưng tốt hơn là yêu cầu tất cả người dùng thay đổi cài đặt Safari của họ trong System Prefs, lol.

Answer 5

Đã gặp phải vấn đề tương tự và phải triển khai điều hướng tab theo chương trình. May mắn tìm thấy jquery tabbable này Plugin https://github.com/marklagendijk/jQuery.tabbable và đặt nó để sử dụng tốt, đây là

require('../../node_modules/jquery.tabbable/jquery.tabbable'); 
$(document).ready(() => { 
    $(document).keydown((event) => { 
    if (event.keyCode === 9) { 
     window.$.tabNext(); 
     event.preventDefault(); 
    } 
    }); 
});