無法給予按鈕元素焦點

Question

我正在嘗試將重點放在Angular 2應用程序中的以下按鈕上：

<button (click)="confirmOk(modalId)" class="btn btn-default ok" id="ok-button" tabindex="0">
    <img src="/assets/shared/images/icon-ok.png" />
    {{okText}}
</button>

在頁面上，我打開開發人員控制台（F12）並鍵入以下內容：

var e = document.getElementById("ok-button");

此時，它返回了我期望的元素，所以我知道JavaScript正在找到該按鈕。 因此，我回到控制台並輸入：

e.focus();

...並且按鈕沒有聚焦。 我知道它沒有得到焦點，因為我有一個CSS類用於此按鈕的：focus狀態，如果該按鈕獲得焦點，則應該在按鈕周圍放一個大紅色邊框。 當我手動單擊按鈕以使其聚焦時，確實可以看到該紅色按鈕。

遵循注釋中的建議，我還嘗試將此代碼添加到事件中，該事件觸發按鈕顯示在頁面上：

showButton();  // the button is triggered to appear here
setTimeout(function() {
   let e = document.getElementById('ok-button');
   if (e) {
       e.focus();  // breakpoint here does indeed get triggered
   }
}, 2000)

不幸的是，那也不起作用。

更新：這可能會有所幫助。 當我在瀏覽器上單擊“刷新”時，目標按鈕會在頁面實際刷新之前暫時獲得焦點。 所以我想這與頁面上的時間有關，還是Angular對頁面進行重新粉刷？

Answer 1

問題只是我試圖獲得焦點時控制台是打開的。 即使我沒有輸入控制台，它也總是以某種方式竊取焦點。 關閉控制台后，嘗試從代碼而不是從瀏覽器獲得焦點，焦點就成功應用了。