要在Enter鍵上將焦點放在錨標簽上，請按

Question

我在代碼中使用了Anchor標簽，如下所述：

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

按下Enter鍵時，它會打開特定的頁面/鏈接，但“默認選項卡導航”將從URL開始。 我想要的是在TAB導航期間選擇特定的鏈接，然后按Enter鍵，特定的頁面/鏈接將打開，並且焦點應保留在該鏈接/錨標簽上。 當前它移動並從URL開始默認導航。

我使用了以下CSS代碼：

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

能否請任何人幫助我解決此問題？

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();
})

檢查此代碼

Answer 2

好的，我希望我能正確理解您的問題。 我認為您希望導航鏈接在用戶按下Enter鍵后可以保持焦點。 例如，用戶在主頁上，可以使用標簽將焦點放在“聯系我們”鏈接上，然后按Enter。 導航到新頁面完成后，您希望聯系人鏈接保持焦點。

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');
 }

如果使用此方法，則必須在網站的每個頁面上都包含此代碼。 這是一個有效的例子 。

編輯：清理代碼並添加jsFiddle鏈接

Answer 3

如果我理解正確，請嘗試將target="_blank"到錨點

例：

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