如何使自定义Web组件可聚焦？

Question

我正在写一个旨在进行交互的custom web component。如何告诉浏览器该自定义组件应该获得焦点？

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

• 可以集中（通过标签导航）；
• 专注时可以接收按键；
• 可以由:focus pseudo-selector匹配。

我不使用任何外部库，仅使用普通的HTML5 API。

Answer 1

基于我在:focus中找到的this demo，我得到了这个答案：

只需将this question属性添加到您希望可聚焦的元素上。

tabindex

单击该元素将使其具有焦点。按下选项卡将起作用。在CSS中使用

// 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.

也可以。尽管:focus无效（但keydown），但keyup和keypress事件有效。在Chrome 44和Firefox 40上进行了测试。

还请注意，即使缺少HTML属性，it's deprecated anyway也会返回this.tabIndex，但这与设置-1的行为不同：

• [tabindex="1"：无<foo></foo>属性，该元素不可聚焦。
• [tabindex：该元素无法通过Tab导航到达，但是通过单击仍可聚焦。

参考：

• <foo tabindex="-1"></foo>
• http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute
• https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Answer 2

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

正如您所说，https://github.com/whatwg/html/issues/113在您的Web组件不包含可聚焦元素时起作用。如果确实如此，它将变得更加复杂。

例如，如果您的组件包含一个或多个输入，那么首先“整个”组件将获得焦点，然后，在制表时，每个内部输入都将一个接一个地获得焦点。这通常不是您想要的。通常，当组件获得焦点时，这应意味着其第一个输入立即得到焦点。

此外，还有一个反跳问题。如果您的第一个输入具有焦点，然后按SHIFT-TAB键，则“整个”组件将获得焦点，并且您不得不两次按SHIFT-TAB键才能移至上一个元素。

我发现这是为了解决所有焦点和标签问题：

this.tabIndex = 0

注意：截至目前（2015年9月），如果内部元素获得焦点，则[W0]元素与

// 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; }

伪选择器不匹配（仅在Chrome中测试）。如果发现此行为只是错误的。触发了焦点事件，而没有触发模糊事件。所以这个元素应该有重点，对吗？我希望他们将来能改变这种情况。

Answer 3

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

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

驯服<button type='button'>的工作少于看起来的工作（特别考虑一下按钮更改的行高）