选择子输入但仅使用键盘时将焦点样式应用于父元素

Question

所以我已经两次偶然发现这个问题了。我有自定义组件，有时需要自定义焦点等。

例如，需要以某种方式选择单选按钮，同时实际将焦点设置在父包装器上。当按下回车键时，它应该使收音机有

checked="true"

这个问题似乎可以通过使用

:has()

选择器和 CSS 来解决，但它没有得到广泛支持，所以我不能使用它。

在父包装上使用 :focus-within 时，它几乎可以工作，但我也得到了聚焦边框

onClick

，这是我不想要的。我希望它可以通过键盘聚焦。

所以我的问题是。我应该让包装器成为一个将

checked

状态传递到

<input type="radio" />

的组件，还是我可以使用 HTML 和 CSS 甚至打字稿以某种方式解决它？

Answer 1

最终不得不使用typescript来解决。因此，我正在侦听当前的元素 keyup 事件，并检测按下的键是否为 Tab 并将

-is-focused

类应用于包装器。

我使用全局事件侦听器检测关闭元素按键，如果目标元素不是当前元素，则会取消焦点。

const elemId = `${id}--wrapper`;
document.getElementById(elemId)?.addEventListener('keyup', (e) => {
  if (e.key === 'Tab') {
    document.getElementById(elemId)?.classList.add('is-focused');
  }
});
document.addEventListener('keypress', (e) => {
  const current = e.target as HTMLElement;

  if (current?.parentElement?.id !== elemId) {
    document.getElementById(elemId)?.classList.remove('is-focused');
  }
});