How to restore the original height of the textarea when the button is pressed through javascript?

Question

everyone, I am not familiar with javascript. I would like to ask you a question! I have a message block. The default block height is to retain the input height of 1 row. The height of the textarea will increase as more text is input. the maximum height is 3 row, I currently write directly textarea above

oninput = "this.style.height = ''; 
    this.style.height = Math.min (this.scrollHeight -3, 67) + 'px'"

is It can be achieved, but the question arises how to restore the height to the original height of 1 row after pressing send?

.demo{
  resize:none;
  max-height:120px;
}

<div id="app">
  <textarea  oninput="this.style.height=''; 
      this.style.height = Math.min(this.scrollHeight -3 ,67)+'px'" class="demo">
  </textarea>
  <br>
  <input type="button" value="SEND">
</div>

Maybe some help [here](https://stackoverflow.com/a/25621277/1171702). — wazz, Aug 23 '21 at 06:40
Can you please elaborate the question ? If I am not wrong, you want to change the height of the textarea when you press the send button. right? — ajinkya, Aug 23 '21 at 07:03
@ajinkya First of all thank you for paying attention to my question! Yes, I want to restore the textarea to its original height when I click — WEI A, Aug 23 '21 at 08:48
@WEIA, I posted the solution for you please check it out and let me know whether it is useful or not ? — ajinkya, Aug 23 '21 at 09:53

ajinkya · Accepted Answer · 2021-08-24T06:58:43.640

2

I got your question that you want to restore the height of the Text area. The answer is simple, you can set the height of the text area by assigning the number of rows. Note : This does not affect the function abilities of the textarea. It just affect the height of the textarea.

To do that check out my solution,

$(document).ready(function(){
    $("#btnDefault").click(function(){
    $('#Sometext').attr('rows', 2);
  });
  $('#Sometext').keyup(function(){
    $('#Sometext').attr('rows', 10);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btnDefault">
Set to defaults
</button>
<textarea id="Sometext" rows="10">
</textarea>

To achieve this

I set the rows attribute to the textarea in the html tag.
wrote the button click event in which I am resetting the number of rows of the text area.

Further ahead you can clear the text area after click if you want to by,

$('#Sometext').val('');

If you find it useful please let me know, feel free to comment on the answer!

edited Aug 24 '21 at 06:58

answered Aug 23 '21 at 09:49

ajinkya

334
3
15

My Pleasure :) @WEIA – ajinkya Aug 24 '21 at 04:13
@ajinkya your answer works only for one time. After clicking the button the textarea is empty and has only 2 rows. It will not expand again in height if the user enters text again. Otherwise it would be my favorite solution too. – rince Aug 24 '21 at 06:39
@rince You can use keyup event to do it ! in which whenever the user presses the key it will expand the text area to a certain limit. I will update the answer if you want. – ajinkya Aug 24 '21 at 06:46
@rince I have updated the answer, In which whenever a user try to write something in the textarea it will expand itself to 10 rows. – ajinkya Aug 24 '21 at 07:10
@ajinkya thats a more complete answer and a good approach! – rince Aug 24 '21 at 07:24
Yup, previously I just gave the solution for the question – ajinkya Aug 24 '21 at 07:39

rince · Answer 2 · 2021-08-23T07:06:40.563

What should be done with the input of the textarea on click send button?

If you only want to set the textarea height to the first state (as your css says max-height:120px;) you can remove the height of the textarea via jquery:

jQuery('input').on("click", function(){
  jQuery('textarea').css('height','');
})

But I think you want to remove the content of the textarea on click!?

jQuery('input').on("click", function(){
  jQuery('textarea').html('').css('height','');
})

https://jsfiddle.net/rince1984/ad8u23b5/3/

score 1 · Answer 3 · answered Aug 23 '21 at 08:00

When the button is clicked, just unset your textarea height like this:

const txtarea = document.querySelector('.demo');
const submitBtn = document.querySelector('.someBtn');

txtarea.addEventListener('input', () => {
  txtarea.style.height = Math.min(txtarea.scrollHeight -3, 67) + 'px';
});

submitBtn.addEventListener('click', () => {
  txtarea.value = ''; // remove this line if you already have code that resets your field
  txtarea.style.height = 'unset';
});

.demo{
  resize:none;
  max-height:120px;
}

<div id="app">
  <textarea class="demo">
  </textarea>
  <br>
  <input class="someBtn" type="button" value="SEND">
</div>

How to restore the original height of the textarea when the button is pressed through javascript?

3 Answers3