Safari忽略tabindex

我有两个button旁边的文本框和另一个文本框后的2个button。 第一个文本框的tabindex为1000,第一个button为1001,第二个button为1002.第二个文本框的tabindex为1003。

当我按tab时,tabindex在除Safari之外的所有浏览器中都能正常工作,即使tabindex已经正确设置,它也会立即从第一个文本框移动到第二个文本框。 任何想法如何防止这个问题?

5 Solutions collect form web for “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(); } }); }); 
  • 有没有一个CSS的黑客Safari浏览器只有不铬?
  • 从Windows机器访问iOS Safari Web Inspector
  • iPhone Safari不会自动缩小纵向 - >横向 - >纵向
  • 禁用input文字颜色
  • 停止从iPhone主屏幕启动的Web应用程序的重新加载
  • 如何删除input文本元素上的边框突出显示
  • 如何在我的网站上启用iOS 5 Safari阅读器?
  • 我怎样才能删除在Mac上的Safariselect元素的光泽?
  • 修复移动Safari(iPhone)中字体大小问题,其中文本呈现不一致,并且一些字体比其他字体大?
  • iOS9:尝试通过计划打开应用程序,否则redirect到app store
  • 如何在Chrome或Safari中为缩小的JS函数设置断点?