0

I have a simple textarea, like below:

http://jsfiddle.net/o2gxgz9r/469/

What I want to do is the following:

  1. If there is no text in the input, have the height of the textarea be 50px.
  2. If there is text in the input, change the height of the textarea to auto, but keep the minimum height of 50px. The height of the textarea shouldn't change as long as there is 1 line of text in the textarea.

How would I do this?

$(document).on('input', 'textarea', function(event) {
  var el = $(this);

  if (el.val()) {
    el.addClass('active');
  } else {
    el.removeClass('active');
  }
});
body {
  margin: 50px;
}
textarea {
  font-family: "Arial";
  width: 600px;
  height: auto;
  padding: 16px 20px;
  line-height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Enter some text..."></textarea>
chirag
  • 1,761
  • 1
  • 17
  • 33

0 Answers0