在 safari 浏览器中，子元素不会成为父元素的焦点

Posted 2023-02-23

【中文标题】在 safari 浏览器中，子元素不会成为父元素的焦点

【英文标题】：Child element doesn't take the focus of the parent in safari browsers

【发布时间】：2017-08-30 14:51:24

【问题描述】：

我有一个容器，当我单击它时，它会获得焦点并显示他内部的隐藏内容。

现在，在隐藏容器中有一个按钮，当您单击它时，它会获得焦点并关闭父级。

它适用于所有浏览器，除了 ios 和 macos 上的 safari。

我正在寻找一个干净的 CSS 解决方案。

html

<div class="box" tabindex="0">
  <div class="front">CLICK ME</div>
  <div class="hidden">
    <button class="close">close button</button>
  </div>
</div>

SASS

.box
  position:relative;
  height:200px; width:200px;


.front,
.hiddenheight:100%; width:100%; position:absolute; 

.closeheight:100px; width:100px;

.box:focus
  .frontdisplay:none;
  .hiddendisplay:block;


.frontbackground:blue; color:white;
.hiddenbackground:red; display:none;

DEMO

【参考方案1】：

将按钮标签更改为具有 tabindex 属性的不同元素（例如 DIV），然后它也可以在 Safari 中使用。

Safari 和 iOS 上的其他一些浏览器显然对按钮有奇怪的焦点行为。即使使用 tabindex，它们似乎也永远不会获得焦点。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

例子

<button class="close">close button</button><!-- not working -->
<!-- Use instead -->
<div class="close" tabindex="0" role="button"></div><!-- working -->

DEMO

【参考方案2】：

iOS 的解决方案是按住 Option Key + Tab 键。然后按钮将被标记。