javascript - 如何自动设置文本区域高度

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>