html单击标签可以聚焦,html5 – 如何使自定义Web组件可聚焦？

根据我在

this question发现的

this demo,我有这样的答案：

只需将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中的焦点也可以使用. keydown和keyup事件工作,虽然keypress没有(但it’s deprecated anyway).在Chrome 44和Firefox 40上测试过.

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

>< foo>< / foo>：没有tabindex属性,该元素不可聚焦.

>< foo tabindex =“ - 1”>< / foo>：该元素无法通过制表符导航访问,但仍可通过单击进行调整.

参考文献：