javascript - 辅助功能和焦点/跳转到 anchor

Question

由于某些辅助功能需求，我想将焦点转移到 anchor 。

原因是阅读浏览器。当我单击链接“聚焦到 anchor ”时，我希望浏览器开始从 anchor 读取页面，但为此我需要将其聚焦。

我还想要从该 anchor 开始的选项卡导航。我不想使用 tabindex，这并不是一个很好的使用方法。我不想在 URL 中使用 #hash，我的页面中不需要任何自动滚动。

不幸的是，今天我的下面的代码不起作用。这只是一个例子来说明我的需求。

<div id="content">

  <p>Paragraph...</p>
  <p>Paragraph...</p>
  <a href="#">A link</a>
  <p>Paragraph...</p>
  <p>Paragraph...</p>

  <a name="myAnchor"></a>

  <p>Paragraph...</p>
  <p>Paragraph...</p>
  <a href="#">A link</a>
  <p>Paragraph...</p>
  <p>Paragraph...</p>

  <a href="javascript:;" id="focusToAnchor">Focus to anchor</a>

</div>
<script type="text/javascript">
    $('#focusToAnchor').click(function() { $('a[name="myAnchor"]').focus(); });
</script>

有什么建议吗？谢谢

Answer 1

首先，您需要将代码包装在 $(document).ready() 函数中，接下来我会将 name 属性更改为 id 并使用普通选择器在点击处理程序中

我还会使用 hashbang 作为 href 来维护有效的 html，但防止点击处理程序中的默认设置

<a id="myAnchor"></a>
$(document).ready(function(){
   $('#focusToAnchor').click(function(e) {
       e.preventDefault();

       $("#myAnchor").focus(); 
   });
});

使用 Fiddle 更新

http://jsfiddle.net/hxUpQ/11/它似乎没有触发样式，但该元素肯定会获得焦点，因为它正在触发焦点事件。我还测试了是否有其他东西突然抢走了焦点，但我的大量测试都没有表明情况确实如此。