无法给予按钮元素焦点

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类：焦点状态，如果它得到焦点，应该在按钮周围放一个大的红色边框。当我手动点击按钮使其聚焦时，我确实可以看到红色按钮。

根据评论中的建议，我还尝试将此代码添加到触发按钮出现在页面上的事件中：

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

问题只是控制台在我试图获得焦点时打开了。即使我没有在控制台上打字，它也总是以某种方式窃取焦点。一旦我关闭控制台，并试图从代码而不是浏览器中获得焦点，焦点就成功应用了。