觸發使用Javascript焦點設置到「DIV」 - 不JQUERY - 角上點擊使用角指令NG單擊

Question

觸發焦點設置到「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); 
}); 
}; 

注意：我們不能添加id或向DOM添加類。

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

Answer 1

一個更好的方式來處理跳到主要內容沒有任何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：注重造型，這樣就可以看到它的工作，但你會希望這種美麗的樣式（僅適用於這個div保持重點概括爲可操作的元素）

Answer 2

的scrollIntoView功能在所有的主流瀏覽器（包括鉻/火狐/即> = 8），但是如果你想將click事件附加到元素，你應該使用addEventListener功能：

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

檢查這個片段：

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()有以確保瀏覽器會忽略對a標籤click事件的默認行爲。

Answer 3

設置的重點是爲調用目標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>