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 developer.mozilla.org/en-US/docs/Web/API/EventTarget/… — christopher clark
– christopher clark, Commented Nov 30, 2016 at 18:56

Dekel · Accepted Answer · 2016-11-30 18:58:10Z

2

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.

answered Nov 30, 2016 at 18:58

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lost_in_magento Over a year ago

Hi, Dekel. I have edited my question, How do we push this in Angular ng-click?

Dekel Over a year ago

Regarding the angular ng-click - i'll look into it

lost_in_magento Over a year ago

I gave you 1 up!! :P Thanx in advance

Maxi Over a year ago

Worked like a charm! I used it without a click event: document.querySelector('.goToClass').scrollIntoView() Thanks!

TimoStaudinger · Accepted Answer · 2016-11-30 18:59:44Z

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, 2016 at 18:59

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

1 Comment

lost_in_magento Over a year ago

This very perfect but if you have any idea in doing in this in Angular ng-click? Please do share

haltersweb · Accepted Answer · 2016-11-30 19:00:26Z

0

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)

edited Nov 30, 2016 at 19:00

answered Nov 30, 2016 at 18:54

haltersweb

3,1742 gold badges16 silver badges15 bronze badges

1 Comment

lost_in_magento Over a year ago

Hi Halters, Thank you for the solution, I cannot add ids or classes to the DOM, Please share some other solution

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related