自動調整textarea與內文onkeydown的高度相同

Question

我試圖自動調整textarea onkeydown的高度，但它只是部分工作。當你在textarea中輸入文本時，它會自動調整每行新文本的textarea高度，這正是我想要的。但是，當您退格時，它會自動調整每個字符的textarea高度 - 當您位於每行的最後5個字符後面時，它們會自動調整高度。我究竟做錯了什麼？

#textarea { 
overflow: hidden; 
} 

<textarea id = 'textarea' onkeydown = "adjust()"></textarea> 

<script> 
function adjust() { 

document.getElementById("textarea").style.height = document.getElementById("textarea").scrollHeight+'px'; 

} //end of function adjust() 
</script> 

Answer 1

創建您的textarea：

<textarea id="textarea" onkeyup="InputAdjust(this)"></textarea> 

然後創建一個函數來完成自動高度

<script> 
    function InputAdjust(o) { 
     o.style.height = "1px"; 
     o.style.height = (25+o.scrollHeight)+"px"; 
    } 
</script> 

現在它的+ 25px的，你可以改變它。

例如：https://jsfiddle.net/urp4nbxf/1/

Answer 2

試試這個：

​​

例子：https://jsfiddle.net/DinoMyte/dpx1Ltn2/2/

Answer 3

下面的代碼將工作，但你必須手動指望有多少字符適合在每行，在textarea。每行適合的字符數將取決於textarea的cols，當然還有文本的字體大小。

#textarea { 
overflow: hidden; 
} 

<textarea id = 'textarea' cols = '7' rows = '1' onkeydown = "adjust()"></textarea> 

<script> 

function adjust() { 

var maxCharactersPerColumn = 9; //You have to manually count how many characters fits in per row 

var key = event.keyCode; 
if (key == 8 || key == 46) { 
var length = document.getElementById("textarea").value.length-2; 
} //end of if (key == 8 || key == 46) 
else { 
var length = document.getElementById("textarea").value.length; 
} //end of else !(key == 8 || key == 46) 

var rows = Math.floor(length/maxCharactersPerColumn)+1; 
document.getElementById("textarea").rows = rows; 

} //end of function adjust() 
</script>