设置 scrollHeight 后无法为 textarea 设置行

Question

经过几个小时的努力找出我哪里出错了，我终于发现一旦设置了文本区域的滚动高度就无法设置文本区域的行数。为什么会发生这种情况，我们将如何解决它？

<?php
include("ajaxLink.php");
?>

<textarea id = 'textarea' cols = '30' rows = '3' onkeydown = "changeIt()">
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
</textarea>

<script>

//******************************************************************

function changeIt() {

$('#textarea').height($('#textarea')[0].scrollHeight); 
document.getElementById('textarea').rows = 1000; 

} //end of function changeIt()
//******************************************************************

</script>

很显然，这不是我实际使用的功能，它只是作为一个例子来证明设置scrollHeight后设置textarea的行数不起作用。

Answer 1

我不确定这是否适合您的目的，但我从评论中了解到您想要在按键时自动调整文本区域的高度。但我不确定 blur 的要求是什么。

我想它会回到原来的高度

CSS

textarea {
    min-height: 52px;
}

JS

$("#textarea").on('keydown',function(){
        $(this).height( 0 );
        $(this).height( this.scrollHeight );
      })
    $("#textarea").on('blur',function(){
       $(this).height(0);
    })

jsfiddle demo

设置 scrollHeight 后无法为 textarea 设置行

Cannot set rows for textarea once you set the scrollHeight

javascript

jquery

textarea