javascript - 如何在关注父元素时保持 `textarea` 展开？

Question

我创建了一个文本区域框，它在单击时展开，在未获得焦点时缩回。

但是，如果文本框已经处于展开形式，我希望它在用户单击容器区域(代码段中的蓝色区域)中的任意位置时保持展开形式。

这是我为 textarea 设置动画的 CSS

.container {
  width: 588px;
  background: #E8F5FD;
  mix-blend-mode: normal;
  opacity: 1.00;
  border-radius: 3px;
  padding: 10px;
}

textarea {
  font-family: "Roboto";
  font-style: normal;
  font-weight: normal;
  width:508px;
  height:38px;
  font-size: 13px;
  line-height: 100%;
  opacity: 1.00;
  border: 1px solid #C6E7FB;
  box-sizing: border-box;
  border-radius: 3px;
  margin-left: 5px;
  transition: all 0.0s ease;
  resize: none;
}

textarea:focus {
  width: 508px;
  height: 82px;
}

<div class = "container">
  
<textarea> </textarea>

  <button
type="button"
className="sendButton"
onClick={this.handleSubmit}>Send</button>
  
</div>

如果用户单击 container div 中的任意位置，我如何才能使文本框保持展开形式？如果用户点击容器外的任何地方，它的行为是否像现在一样？

Answer 1

像 div 标签这样的常规 block 元素在默认情况下是不可聚焦的。但是，您可以通过添加属性 tabindex="-1" 使任何元素可聚焦，此时您可以使用 CSS 来扩展 textarea 或 。 container 聚焦或 textarea 聚焦。此方法也很高效，因为它不需要 JavaScript!

.container:focus textarea,
textarea:focus {
  width: 508px;
  height: 82px;
}

.container {
  width: 588px;
  background: #E8F5FD;
  mix-blend-mode: normal;
  opacity: 1.00;
  border-radius: 3px;
  padding: 10px;
}

textarea {
  font-family: "Roboto";
  font-style: normal;
  font-weight: normal;
  width: 508px;
  height: 38px;
  font-size: 13px;
  line-height: 100%;
  opacity: 1.00;
  border: 1px solid #C6E7FB;
  box-sizing: border-box;
  border-radius: 3px;
  margin-left: 5px;
  transition: all 0.0s ease;
  resize: none;
}

<div class="container" tabindex="-1">
  <textarea> </textarea>
  <button type="button" className="sendButton" onClick={this.handleSubmit}>Send</button>
</div>