Triggering set focus to 'DIV' using Javascript - NO JQUERY - Angular ng-click

Question

Trigger set focus to "DIV" element on click using Angular directive

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

When I click on this the link it should shift the focus to the div

To achieve this I wrote this piece of code PSB.

I tried using scrollIntoView(); also but not sure it'll work in all the browsers and it dint work for me too.

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

Note: We cannot add ids or add classes to DOM.

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

Also, `x.addEventListener` is the correct function you are looking for https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener — christopher clark, Nov 30 '16 at 18:56
http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function — starcorn, Nov 30 '16 at 19:15

score 2 · Answer 1 · answered Nov 30 '16 at 18:58

The scrollIntoView function works in all major browsers (include chrome/firefox/ie>=8), however if you want to attach the click event to the element you should use the addEventListener function:

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

Check this snippet:

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>

Note - the e.preventDefault() is there to make sure the browser ignores the default behavior of the click event on the a tag.

Hi, Dekel. I have edited my question, How do we push this in Angular ng-click? — lost_in_magento, Nov 30 '16 at 20:20
Worked like a charm! I used it without a click event: document.querySelector('.goToClass').scrollIntoView() Thanks! — Maxi, Feb 12 '20 at 14:19

score 1 · Answer 2 · answered Nov 30 '16 at 18:59

1

Setting the focus is as easy as calling the focus() function on the target DOM element:

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>

answered Nov 30 '16 at 18:59

TimoStaudinger

41,396
16
88
94

This very perfect but if you have any idea in doing in this in Angular ng-click? Please do share – lost_in_magento Nov 30 '16 at 20:16

haltersweb · Answer 3 · 2016-11-30T19:00:26.193

A better way to handle skip to main content without any JavaScript at all is this:

make the skip to link an internal link pointing to the id of the wrapper div you want to skip to.
make sure the targeted wrapper div has tabindex="-1" so that it can receive focus. This will help with screen readers and those using keyboard-only access.

Of course no actual scrolling will happen if the page is too short. More content, more the chance for scrolling.

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

I have kept the native div:focus styling so that you can see it working but you will want to style that away (only for this div. keep focus outlines for actionable elements)

Hi Halters, Thank you for the solution, I cannot add ids or classes to the DOM, Please share some other solution — lost_in_magento, Nov 30 '16 at 20:29

Triggering set focus to 'DIV' using Javascript - NO JQUERY - Angular ng-click

3 Answers3