To re-focus on the anchor icon
I have used anchor tags in my main page. While pressing the TAB key, press when focus is on a specific anchor tag, and then press ENTER, it is redirected to a specific linked page. The anchor mark is working fine. But I want that since it opens a specific linked page and the page reloads, then the focus should remain on that specific link. To the next press of the TAB key press navigation / focus moves to the next anchor tag. But what is currently happening is that when we press the ENTER key, this anchor tags link is open and on the TAB key press default, the navigation starts from the URL.
<div title="Main" >
<a href="/Home.aspx" id="home">
<div class="link-title">
Home
</div>
</a>
</div>
<div title="Contact" >
<a href="/Contact.aspx" id="contact>
<div class="link-title">
Contact
</div>
</a>
</div>
The CSS code is shown below:
/* To set keyboard focus on Tab press*/
a:focus
{
outline: 1px dotted black;
}
source to share
If I understand you correctly, here is my suggestion: Add an attribute data
to an element body
(for example) of each page and set a value, such as the index of each tag anchor
or something key
, then page_load
using jquery
read that the attribute data
and focus is dependent on the value.
<body data-index='1'>
// rest of the html
JS:
var index = $('body').data('index');
$anchors.eq(index).focus(); // you need to find `anchor` tags first.
Hope for this help.
source to share
I think you are expecting this solution.
Try this method using an keydown
event for tab
.
$(function () {
$("a").keydown(function (e) {
if (e.which == 9) {
var ele = $("a");
var len = ele.length;
var index = ele.index(this);
if (index == (len - 1)) {
ele.eq(0).focus();
e.preventDefault(); //To prevent event bubbling
}
}
});
});
a:focus {
color: yellow;
outline: 1px dotted black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div title="Main">
<a href="/Home.aspx" id="home" target="_blank">
<div class="link-title">
Home
</div>
</a>
</div>
<div title="Contact">
<a href="/Contact.aspx" id="contact" target="_blank">
<div class="link-title">
Contact
</div>
</a>
</div>
<div title="About">
<a href="/About.aspx" id="about" target="_blank">
<div class="link-title">
About
</div>
</a>
</div>
Hope this helps you.
source to share