如何確保html元素的tab順序始終表現相同，無論頁面刷新還是導航到頁面？

我正在使用的項目是使用AngularJS並使用UI-Router插件來管理所有狀態/頁面更改。如何確保html元素的tab順序始終表現相同，無論頁面刷新還是導航到頁面？

當我通過點擊應用程序主頁上的按鈕進入某個頁面時，該頁面的Tab鍵順序從頁腳開始。但是，當我刷新同一頁面時，Tab鍵順序正確地從頁面頂部開始。我注意到當我通過主頁上的按鈕進入頁面，並在開始標籤之前單擊頁面頂部時，標籤順序表現正確。

我曾嘗試添加tabIndex =「0」到主導航欄中的鏈接，但是沒有任何區別。就像我所說的，當我刷新頁面時，頁面的Tab鍵順序工作得很好。當我從網站的其他部分導航到頁面時，它只會被搞亂。

有沒有辦法確保Tab順序的行爲完全一樣，無論我刷新頁面，還是從導航到網站的其他頁面的頁面？

來源

2016-06-28 user2407334

您是否有示例網址？任何機會在應用程序的主頁上的按鈕是一個鏈接到錨點（也許到'＃頁腳或類似的）？無論哪種方式，「tabindex」不會做我認爲你想達到的目標;它只是讓一個元素可以聚焦。 – aardrian

需要更多的上下文。請發佈示例代碼。 –

在statechange上或當控制器被初始化並且DOM已經渲染後，將焦點設置爲符合條件的第一個控件。

包含在視圖：

<body ng-app="myApp"> 
    <div id="tabContent" ui-view></div> 
    </body>

的Javascript：

var rootElementName='tabContent'; 
$timeout(function() { 
       var formElements = $('#' + rootElementId) 
            .find('select[disabled!="disabled"],input[disabled!="disabled"],textarea[disabled!="disabled"]'); 
       if(formElements && formElements.length > 0) { 
        formElements[0].focus(); 
        return true; 
        } else { 
        return false; 
        } 
      }, 0);

*您可以在服務或指令做到這一點。或者你可以將它綁定到onEnter或$ viewContentLoaded事件。

我包含了id，因此您可以將控件定位到頁面的特定部分，並且此示例將關注未禁用的第一個select，input或textarea控件。

來源

2016-06-28 18:49:37

非常感謝！ – user2407334

如何確保html元素的tab順序始終表現相同，無論頁面刷新還是導航到頁面？

回答

相關問題