如何在自动上设置textarea高度

Question

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>

因此，我需要像在div中一样，在文本区域内看到整个内容，而没有隐藏区域。

有帮助吗？

Answer 1

您需要将文本区域的高度设置为滚动高度。因此，请使用scrollHeight属性来获取它。

$('#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>