CODEWITHSUNDEEP
javascripthtmlangularjssetfocus
lost_in_magento
lost_in_magento

Reputation: 683

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

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/

Upvotes: 1

Views: 2815

Answers (3)

haltersweb
haltersweb

Reputation: 3149

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

  1. make the skip to link an internal link pointing to the id of the wrapper div you want to skip to.
  2. 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)

Upvotes: 0

TimoStaudinger
TimoStaudinger

Reputation: 42520

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>

Upvotes: 1

Dekel
Dekel

Reputation: 62666

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.

Upvotes: 2

Related Questions