调整文本区域大小以适合所有内容[关闭]

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

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代表我的文本区域的字符宽度）

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

任何帮助，将不胜感激。

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

您的代码失败，因为没有像 Math.ceiling() 这样的方法，它被称为数学.ceil() https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Math/ceil反而。

除此之外...

函数内的所有变量都是全局的。这不是一个好的做法 - 你应该始终添加var关键字到您的变量声明中，以使该变量对该函数私有 - 否则您可能会意外修改某些全局变量并导致真正糟糕的事情发生。使用JSLint http://jslint.com检查您的代码是否存在此类问题。

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

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

例如：

function resizeTextarea(textarea) {
  var lines = textarea.value.split('\n');
  var width = textarea.cols;
  var height = 1;
  for (var i = 0; i < lines.length; i++) {
    var linelength = lines[i].length;
    if (linelength >= width) {
      height += Math.ceil(linelength / width);
    }
  }
  height += lines.length;
  textarea.rows = height;
}
  

我建议你也研究一下SO帖子的答案自动调整文本区域大小 https://stackoverflow.com/questions/7477/autosizing-textarea，三联画指出。