调整 textarea 的大小以适合所有内容 [关闭]答案

【问题标题】：Resize textarea to fit all content [closed]调整 textarea 的大小以适合所有内容 [关闭]
【发布时间】：2009-06-13 02:12:55
【问题描述】：

我正在尝试尽可能紧密地调整文本区域的大小以适应其中的内容。这是我目前的努力：

function resizeTextarea(t) {
a = t.value.split('\n');
b = 1;
for (x = 0; x < a.length; x++) {
    c = a[x].length;
    if (c >= 75) b += Math.ceiling(c/75);
    }
b += a.length;
t.rows = b;
}

这很好用，但是当用户通过填充宽度将文本“推”到下一行时似乎会失败。（注意：这里使用的 75 代表我的 textarea 的字符宽度）

还有一个奇怪的效果，其中 [enter][key] 使 textarea 超出文本末尾 2 行，然后下一个 [key] 将其带回到预期的多行。如果c

任何帮助将不胜感激。

注意：此函数在按键按下时调用。

【问题讨论】：

完全欺骗：stackoverflow.com/questions/7477/autosizing-textarea

标签： javascript

【解决方案1】：

你的代码失败了，因为没有像 Math.ceiling() 这样的方法，它被称为 Math.ceil()。

除此之外……

函数中的所有变量都是全局变量。这不是一个好习惯——你应该总是在你的变量声明中添加var关键字，以使该变量成为该函数的私有变量——否则你可能会不小心修改一些全局变量并导致非常糟糕的事情发生。使用JSLint 检查您的代码是否存在此类问题。

将文本区域的宽度硬编码到函数中也不好。这样，您就不能将调整大小功能用于可能具有不同宽度的其他文本区域。在当前情况下，最好从 textarea 的 cols 属性动态读取宽度。

将变量重命名为比 a、b、c 更有意义的名称也会大大提高可读性。

例如：

函数 resizeTextarea(textarea) { var lines = textarea.value.split('\n'); var 宽度 = textarea.cols; 变量高度 = 1; for (var i = 0; i =宽度）{ 高度 += Math.ceil（线长/宽度）； } } 高度+=线。长度； textarea.rows = 高度； }

我建议您也研究一下由 Triptych 指出的 SO 帖子 Autosizing Textarea 的答案。

【讨论】：

我正在修改我在网上找到的一个函数。我最近刚尝试从地板换到天花板。