在不更改默认浏览器首选项的情况下将 tabindex / focus 添加到 Safari 中的按钮

Question

使用键盘浏览表单时，按钮元素不会在 Safari 中获得焦点（已在 Yosemite 上的 v8.0 中测试）。除非在首选项 --> 高级下明确打开制表符。有什么办法可以解决这个问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <form action="">
    <fieldset>
      <input type="text" />
      <button>Button</button>
      <input type="text" />
      <button type="button">Button</button>
    </fieldset>
  </form>
</head>
<body>
  
</body>
</html>

http://codepen.io/alexandtheweb/pen/raQrxw

Answer 1

没有办法解决这个问题。用户需要启用这些首选项才能使 Tab 键正常工作。

Answer 2

Safari 的行为与其他浏览器完全不同。默认情况下，您可以使用 "Option(/Alt) + Tab" 快捷方式关注所有可点击的元素。 Tab 将只关注文本字段，除非您提到的选项已打开。

例如，请参阅 "Highlight the next item on a webpage" 部分旁边的以下帮助页面。 https://support.apple.com/kb/PH17148?locale=en_US

Answer 3

如果您使用 jquery，这里有一个快速修复：

$('body').on('keydown',function(e){
    if (e.keyCode == 9){
        var $focused = $(':focus');
        var inputs = $('input:not([type="hidden"]),select,textarea,button');
        inputs.eq(inputs.index($focused[0])+1).focus();
        e.stopPropagation();
        e.preventDefault();
        return false;
    }
});

在不更改默认浏览器首选项的情况下将 tabindex / focus 添加到 Safari 中的按钮

Add tabindex / focus to buttons in Safari without changing default browser preferences

html

keyboard

safari

accessibility

tabindex