Question

经过几个小时试图找出错误的地方后，我终于发现，一旦为textarea设置了scrollHeight，就无法设置textarea的行。为什么会发生这种情况，我们将如何解决？

<?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

我不确定这是否符合你的目的，但我从评论中理解你想要在keydown上自动调整textarea高度。但我不确定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设置行

1 个答案: