Question

我创建了一个textarea框，当单击时会展开，当它没有聚焦时缩回。

但是，如果文本框已经是展开形式，如果用户点击容器区域中的任何位置（代码段中的蓝色区域），我希望它保持扩展形式。

这是我用于动画 textarea

的CSS

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果用户点击容器 div中的任意位置，如何以扩展形式保留文本框？如果用户点击容器之外的任何地方，它的行为就像现在一样吗？

Answer 1

默认情况下，div标记之类的常规块元素不是可聚焦的。但是，您可以通过添加属性tabindex="-1"来使任何元素都具有焦点，此时，当textarea聚焦或时，您可以使用CSS扩展.container textarea是重点突出的。这种方法也很有效，因为它不需要JavaScript！

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

通过修改HTML并使用一点CSS，可以分两部分解决这个问题。

解决方案是向div添加焦点伪类，以便在单击容器时我们可以扩展子textarea的大小。这是代码......

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

还有一个问题，那就是默认情况下你不能专注于div元素，所以我们必须在HTML中为div添加一个tabindex属性。

<div class = "container" tabindex="-1">

tabindex属性用于将元素添加到可以使用键盘选项卡的项目列表中。但是，值为-1将删除标记相关元素的功能。

确保您保留以textarea为目标的原始焦点psuedo类。

此解决方案的唯一问题是，如果用户单击文本框外的浅蓝色区域，浏览器将显示焦点在周围的div上。这有点难看。我很乐意为此寻求解决方案。

Answer 3

为了让浏览器了解点击次数和能够回复他们你需要javascript＆＃39; s help＆amp;特别是它的事件听力机制。

每个用户与该网页的互动都是事件，浏览器可以收听＆amp;抓住它。然后，您（开发人员）可以告诉浏览器如何检测事件。

在这里，我刚刚告诉浏览器，当用户点击textarea时，focus event会更大（textarea到我们的blur event）。＆安培;每当用户点击外面时textarea到eventlisteners），请将其缩小。从技术上讲，我在focus＆amp;上添加了2 blur。 <textarea> id="myArea"（现在有document.getElementById("myArea").addEventListener('focus', function(){ this.width = 508; this.height = 82; }); document.getElementById("myArea").addEventListener('blur', function(){ this.width = 508; this.height = 42; });）。

这是工作片段：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

class AppDelegate: UIResponder, UIApplicationDelegate {

＆＃13;

当关注父元素时如何保持`textarea`扩展？

3 个答案: