javascript - 无法给予按钮元素焦点

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

...按钮没有获得焦点。我知道它没有获得焦点，因为我有一个用于此按钮的 :focus 状态的 CSS 类，如果它获得焦点，它应该在按钮周围放置一个大的红色边框。当我手动单击按钮以使其获得焦点时，我确实可以看到那个红色按钮。

按照评论中的建议，我也尝试将这段代码添加到触发按钮出现在页面上的事件中:

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

问题只是在我试图集中注意力时控制台处于打开状态。即使我没有在控制台中输入内容，它也总是以某种方式偷走焦点。关闭控制台后，我尝试从代码而不是浏览器获取焦点，焦点已成功应用。