CODEWITHSUNDEEP
javascriptjqueryheighttextarea
user7461846
user7461846

Reputation:

how to set textarea height on auto

var a = 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ';
$('#btn').click(function(){
  $('#tx').val(a);
});
#tx{
  display:block;
  width:100%;
  background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id='tx'>lorem</textarea>
<br>
<button id='btn'>CLICK</button>

So I need to see entire content inside a textarea, without hidden areas, just as in a div.

Any help?

Upvotes: 0

Views: 34

Answers (1)

Mohammad
Mohammad

Reputation: 21489

You need to set height of textarea to height of scroll. So use scrollHeight property to getting it. 

$('#btn').click(function(){
  $('#tx').val(a).height($("#tx")[0].scrollHeight)
});


var a = 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ';
$('#btn').click(function(){
  $('#tx').val(a+a+a).height($("#tx")[0].scrollHeight)
});
#tx{
  display:block;
  width:100%;
  background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id='tx'>lorem</textarea>
<br>
<button id='btn'>CLICK</button>

Upvotes: 1

Related Questions