To set focus on Anchor Tag on enter Key press

Question

I have used Anchor tags in my code as mentioned below:

<div title="Main" >
            <a href="/Home.aspx">

                <div class="link-title">
                    Home
                </div>
            </a>
        </div>
        <div title="Contact" >
            <a href="/Contact.aspx">

                <div class="link-title">
                    Contact
                </div>
            </a>
        </div>

On enter key press it opens specific page/link but Default Tab Navigation starts from URL. What I want is that during TAB Navigation when it selects particular link then on Enter key press specfic page/link will open and focused should remain on that link/Anchor Tag. Currently it moves and start default Navigation from URL.

I have used this CSS Code:

/* To set keyboard focus on Tab press*/
a:focus
{
    outline: 1px dotted black;
}

Can please anyone assist me to fix this?

Answer 1

<div title="Main" >
            <a href="/Home.aspx" id="home">

                <div class="link-title">
                    Home
                </div>
            </a>
        </div>
        <div title="Contact" >
            <a href="/Contact.aspx">

                <div class="link-title">
                    Contact
                </div>
            </a>
        </div>


$(function(){
 $('#home').focus();
})

check this code

Answer 2

Okay, I'm hoping that I understand your problem correctly. I think you want a navigation link to stay focused after a user presses enter to navigate through that link. For example, a user is on the homepage, tabs to focus on a 'contact us' link, then presses enter. After navigation to the new page is complete, you want the contact link to remain in focus.

HTML:

<div id="nav">
  <a id="homeLink" href="index.html">Home</a>
  <a id="contactLink" href="contact.html">Contact</a>
</div>

JS:

//attach event listener to #nav (doesn't work in IE8)
document.getElementById('nav').addEventListener("keydown", storeLinkId, false);

//function stores ID attribute of target link
//into session storage if enter is pressed     
function storeLinkId(e) {
  if (!e) e = window.event;
  var keyCode = e.keyCode || e.which;

  if (keyCode == '13') {
    console.log("storing " + e.target.id);
    sessionStorage.setItem('tabbed-link', e.target.id);
    }
 }

 //if there is a linkid in session storage
 if (sessionStorage.getItem('tabbed-link')) {
   //get the id from session storage
   var linkId = sessionStorage.getItem('tabbed-link');
   //focus on the link with the matching id attribute
   document.getElementById(linkId).focus();
   //delete the linkid from session storage
   sessionStorage.removeItem('tabbed-link');
 }

If you used this method, you would have to include this code on every page of your site. Here's a working example .

Edited: Cleaned up code and added jsFiddle link

Answer 3

If I understand correctly... Try adding target="_blank" to anchors

Example:

<a target="_blank" href="/Home.aspx">...</a>