使用Javascript触发将焦点设置为'DIV' - 没有JQUERY - Angular ng-click

Question

使用 Angular 指令在点击时触发将焦点设置为“DIV”元素

<a href="#" class="skipToContent" ng-click="showContent()" title="skip-to-main-content">Skip To Main Content</a>


<div class="getFocus" role="button" tabindex="0">
        <span>Am Focused</span> 
</div>

当我点击这个链接时，它应该将焦点转移到 div

为了实现这一点，我编写了这段代码 PSB。

我尝试使用scrollIntoView();也但不确定它是否适用于所有浏览器，它也适用于我。

$scope.showContent = function() {
    var x = document.querySelector('.skipToContent');
    var y = document.querySelector('.getFocus');
    y.focus();
    console.log(document.activeElement);
});
};

注意：我们不能向 DOM 添加 id 或类。

https://jsfiddle.net/wrajesh/wo7gkm7d/

Answer 1

scrollIntoView 函数适用于所有主流浏览器（包括 chrome/firefox/ie>=8），但是如果您想将click 事件附加到元素，您应该使用addEventListener 函数：

var x = document.querySelector('.skipToContent');
var y = document.querySelector('.getFocus');
x.addEventListener('click', function(e) {
  y.scrollIntoView()
});

检查这个sn-p：

var x = document.querySelector('.skipToContent');
var y = document.querySelector('.getFocus');
x.addEventListener('click', function(e) {
  e.preventDefault()
  y.scrollIntoView()
});

<a href="#" class="skipToContent" title="skip-to-main-content">Skip To Main Content</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="getFocus" role="button" tabindex="0">
  <span>Am Focused</span>
</div>

注意 - e.preventDefault() 用于确保浏览器忽略 click 事件在 a 标记上的默认行为。

Answer 2

设置焦点就像在目标 DOM 元素上调用 focus() function 一样简单：

document.querySelector('.skipToContent').onclick = function() {
  document.querySelector('.getFocus').focus()
}

<a href="#" class="skipToContent" title="skip-to-main-content">Skip To Main Content</a>

<div class="getFocus" role="button" tabindex="0">
  <span>Am Focused</span> 
</div>

Answer 3

在没有任何 JavaScript 的情况下处理跳转到主要内容的更好方法是：

1. 使跳转链接指向要跳转到的包装 div 的 id 的内部链接。
2. 确保目标包装 div 具有 tabindex="-1" 以便它可以接收焦点。这将有助于屏幕阅读器和仅使用键盘访问的用户。

如果页面太短，当然不会发生实际的滚动。更多内容，更多滚动机会。

<p><a href="#mainContent">Skip to main content</a></p>
<nav>
  <ul>
    <li><a href="#">nav item one</a></li>
    <li><a href="#">nav item two</a></li>
    <li><a href="#">nav item three</a></li>
  </ul>
</nav>
<div id="mainContent" tabindex="-1">
  <h1>Welcome</h1>
  <p>Here is some content</p>
</div>

我保留了本机 div:focus 样式，以便您可以看到它的工作，但您需要将其样式化（仅针对此 div。为可操作元素保留焦点轮廓）