How to keep `textarea` expanded by focusing on the parent element?

Question

I created a textarea field that expands when pressed and draws out when it is out of focus.

However, if the text field is already in the expanded form, I want it to remain in the expanded form if the user clicks anywhere in the container area (blue area in the fragment).

Here is my CSS for textarea animation

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

Run codeHide result

How can I save a text box in expanded form if the user clicks anywhere in the div container? And let it behave as it is now, if the user clicks somewhere outside the container?

Answer 1

, div, . , 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>

Hide result

Answer 2

HTML CSS.

, focus div, . ...

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

, div, tabindex div HTML.

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

tabindex , . -1 .

, psuedo , .

, - , div. . .

Answer 3

, javascript .

- , . () , .

Here I just told the browser to do textareamore when the user clicks on it ( focus eventours textarea). and reduce it every time the user clicks on it ( blur eventours textarea). From a technical point of view, I added 2 eventlistenerson focusand blurin <textarea>(now has id="myArea").

here is a working snippet:

document.getElementById("myArea").addEventListener('focus', function(){
    this.width = 508;
    this.height = 82;
});

document.getElementById("myArea").addEventListener('blur', function(){
    this.width = 508;
    this.height = 42;
});

.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 id="myArea"> </textarea>

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

Run codeHide result