Safari忽略tabindex
我有两个button旁边的文本框和另一个文本框后的2个button。 第一个文本框的tabindex为1000，第一个button为1001，第二个button为1002.第二个文本框的tabindex为1003。
当我按tab时，tabindex在除Safari之外的所有浏览器中都能正常工作，即使tabindex已经正确设置，它也会立即从第一个文本框移动到第二个文本框。 任何想法如何防止这个问题？
默认情况下，safari（！）中禁用了tab-access。 要启用它，请选中“首选项”>“高级”>按标签以突出显示页面上的每个项目“。
我使用Safari 5.1.5进行了以下操作。 我不知道它如何与旧版本的工作：
当“突出显示页面上的每个项目”（请参阅由graphicdivine回答）被禁用时，您可以通过按Option（alt）+选项卡来使用该function。
如果你没有（和选项被禁用），Safari将默认通过所有表单字段（如input，textarea，select…）。 对于这个领域，它也将接受/视为tabindex。 它将首先使用tabindex（按给定索引的顺序）通过所有表单元素，然后按HTML中定义的顺序通过表单元素的其余部分。
所以如果你为两个input元素定义了一个tabindex =“1”（或者1001）和“3”（或者1003），那么Safari将首先关注这个域，然后关注其他域。
让Safari和Mac可访问：
在Mac上进行testing：系统偏好设置 – >键盘 – >快捷键（标签） – >全键盘访问 – >所有控件
对于选项卡在Safari上工作：首选项 – >高级 – >按标签突出显示页面上的每个项目（选中此项）
如果你正在编写自己的网页，我会修正写一些jQuery / JavaScript的东西。 这是我用过的。
缺点是你在页面上阻止了默认的tab键行为，在某些情况下这可能是一个更大的可访问性问题。 但我怀疑它。
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(); }); 这不是完美的解决scheme，但是比告诉所有用户更改System Prefs中的Safari设置要好得多，哈哈。
遇到同样的问题，不得不以编程方式实现选项卡导航。 幸运的是，find了这个jquery tabbable插件https://github.com/marklagendijk/jQuery.tabbable并且很好用，这里是;
require('../../node_modules/jquery.tabbable/jquery.tabbable'); $(document).ready(() => { $(document).keydown((event) => { if (event.keyCode === 9) { window.$.tabNext(); event.preventDefault(); } }); });
