Question

我正在撰写一份旨在互动的custom web component。如何告诉浏览器此自定义组件应该获得焦点？

我希望我的自定义元素......

可以聚焦（通过标签导航）;
可以在专注时接收按键;
可与:focus pseudo-selector匹配。

我没有使用任何外部库，只使用普通的HTML5 API。

Answer 1

根据我在this demo中找到的this question，我得到了这个答案：

只需将tabindex属性添加到您想要关注的元素中。

// Add this to createdCallback function:
if (!this.hasAttribute('tabindex')) {
    // Choose one of the following lines (but not both):
    this.setAttribute('tabindex', 0);
    this.tabIndex = 0;
}
// The browser automatically syncs tabindex attribute with .tabIndex property.

单击元素将使焦点成为焦点。按下选项卡将起作用。在CSS中使用:focus也可以。 keydown和keyup事件有效，但keypress并不适用（但it's deprecated anyway）。在Chrome 44和Firefox 40上测试。

另请注意，即使缺少HTML属性，this.tabIndex也会返回-1，但这与设置tabindex="1"的行为不同：

<foo></foo>：没有tabindex属性，该元素无法调焦。
<foo tabindex="-1"></foo>：无法通过标签导航访问该元素，但点击它仍然可以调整焦点。

参考文献：

Answer 2

@Denilson，我想向您提供更多信息。

正如您所说，this.tabIndex = 0在您的webcomponent不包含可聚焦元素时起作用。如果是这样，它会变得更复杂。

例如，如果您的组件包含一个或多个输入，那么首先是＆＃34;整个＆＃34;组件获得焦点，并且仅在稍后，当标签时，每个内部输入逐个获得焦点。这通常不是你想要的。通常，当组件获得焦点时，这应该意味着它的第一个输入立即获得焦点。

此外，还存在反向标签问题。如果您的第一个输入具有焦点并按SHIFT-TAB，那么＆＃34;整个＆＃34;组件获得焦点，您被迫按两次SHIFT-TAB移动到前一个元素。

我发现这可以解决所有焦点和标签问题：

// At first, the component may get focus and accept tabbing.
createdCallback = function () { this.tabIndex = 0; }

// When the component gets focus, pass focus to the first inner element.
// Then make tabindex -1 so that the component may still get focus, but does NOT accept tabbing.
focus = function (e) { firstFocusableInnerElement.focus(); this.tabIndex = -1; }

// When we completely left the component, then component may accept tabbing again.
blur = function (e) { this.tabIndex = 0; }

注意：截至目前（2015年9月），如果内部元素获得焦点，那么＆＃34;整体＆＃34;元素与:focus伪选择器不匹配（仅在Chrome中测试）。如果发现这种行为是完全错误的。焦点事件被触发，而模糊事件则没有。所以元素应该有焦点，对吗？我希望他们将来能改变这种状况。

Answer 3

如果可能且合适的话，我使用的一种非常实用的方法就是在自定义元素周围放置<button type='button'>。
对于您来说，这可能不适合作为解决方案，无论如何，我还是为其他涉足此问题的人提到了它。

它处理所有焦点问题，包括焦点矩形等等。

驯服<button>的工作量比看上去要少（尤其要考虑按钮更改的行高）

如何使自定义Web组件具有可关注性？

3 个答案: