单击输入时防止父元素消失焦点

【问题标题】：prevent parent element from to disappear focus when input is clicked单击输入时防止父元素消失焦点
【发布时间】：2022-07-06 19:26:34
【问题描述】：

我在 div 中有一个输入。单击此输入时，div 的焦点消失。我怎样才能防止这种情况发生？

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<style>
    .form:focus
    {
      outline: none;
      border:1px solid black;
    }

     .form:active
     {
        outline: none;
        border:1px solid black;
     }

</style>

<div class="form" style="padding:50px" tabIndex="1">
<input type="text" />
</div>
</body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

你只需要使用:focus-within 伪类。如果元素或其任何后代具有焦点，则此元素匹配。

.form:focus-within {
  outline: none;
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div class="form" style="padding:50px" tabIndex="1">
    <input type="text" />
  </div>
</body>

</html>

【讨论】：