自动调整文本区域大小答案

【问题标题】：Auto resize textarea自动调整文本区域大小
【发布时间】：2020-05-11 11:46:40
【问题描述】：

我创建了一个简单的 html 文件，可以自动调整文本区域的大小。

脚本运行（几乎）完美。

我面临的唯一问题是，当按下 [enter] 键时，textarea 仅在下一次按下键后对齐，所以当按下 [enter] 键时，没有对齐。它仅在下一次按键后才对齐。

这是我的简单代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Gangina Auto Resize</title>
<style>
 textarea
  {
    display:block;
    resize:none;
    overflow:hidden;
  }
</style>    
</head>
<body>
<textarea id="txtArea" onkeypress="onTestChange();"></textarea>
<script>
function onTestChange()
  {
    var ta = document.getElementById("txtArea");
    ta.style.height = ta.scrollHeight + 'px';
  }
</script>   
</body>
</html>

我试图在等式中添加一个假的 \n，但它没有按预期工作。

【问题讨论】：

标签： javascript html css textarea keypress

【解决方案1】：

看来你需要keyup

function onTestChange() {
  var ta = document.getElementById("txtArea");
  ta.style.height = ta.scrollHeight + 'px'
}

&lt;textarea id="txtArea" onkeyup="onTestChange();"&gt;&lt;/textarea&gt;

【讨论】：

Working :D 但是当按下 [enter] 键然后再次校准时，文本会以一种有趣的方式跳跃。