Question

将触发设置焦点设置为＆＃34; DIV＆＃34;使用Angular指令单击元素

<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);
});
};

注意：我们无法添加ID或向DOM添加类。

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

Answer 1

scrollIntoView函数适用于所有主流浏览器（包括chrome / firefox / ie＆gt; = 8），但是如果要将click事件附加到元素，则应使用{{1功能：

addEventListener

检查此代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

注意 - <a href="#" class="skipToContent" title="skip-to-main-content">Skip To Main Content</a> <div class="getFocus" role="button" tabindex="0"> Am Focused </div>用于确保浏览器忽略e.preventDefault()标记上click事件的默认行为。

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

使跳过链接指向要跳过的包装器div的id的内部链接。
确保目标包装器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：聚焦样式，以便你可以看到它正常工作，但你想要去掉那个样式（仅限于这个div。保留可操作元素的焦点轮廓）

触发设置焦点到＆＃39; DIV＆＃39;使用Javascript - NO JQUERY - Angular ng-click

3 个答案: