调整textarea的大小以适合所有内容

Question

我正在尝试尽可能紧密地调整textarea的大小以适应其中的内容.这是我目前的努力:

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 <= 1,我尝试将c设置为2,没有效果.这个并不是什么大不了的事,但纠正它会很好.

任何帮助,将不胜感激.

注意:在按下键时调用此函数.

Answer 1

您的代码失败,因为没有Math.ceiling()这样的方法,而是称为Math.ceil().

除此之外...

函数内的所有变量都是全局变量.这不是一个好习惯 - 你应该总是var在变量声明中添加关键字以使变量对该函数是私有的 - 否则你可能会意外地修改一些全局变量并导致非常糟糕的事情发生.使用JSLint检查代码是否存在类似问题.

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

将变量重命名为比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;
}

我建议你也研究一下Triptych指出的SO post Autosizing Textarea的答案.