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

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

无法提供按钮元素焦点

1 个答案: