一旦你設置了scrollHeight，就​​不能設置textarea的行

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> 

很顯然，這不是我使用的實際功能，它只是在這裏作爲一個例子來證明設置textarea的行設置scrollHeight屬性後無法正常工作。

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