Question

我正在尝试自动调整textarea onkeydown的高度，但它只是部分工作。当你在textarea中输入文本时，它会自动调整textarea每个新文本行的高度，这就是我想要的。但是当你退回文本时，当你在最后一行的最后5个字符上时，它会自动调整每个字符退格的textarea的高度。我究竟做错了什么？

#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

试试这个：

$("#textarea").on("keydown",function(){
    if($(this).css("height").replace("px","") <        $('#textarea').get(0).scrollHeight - 5) 
  $(this).css("height",($('#textarea').get(0).scrollHeight-5) + "px"); 
});

示例：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>

自动调整textarea与内部文本onkeydown的高度相同

3 个答案: