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。在当前情况下，最好从textarea的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;
}

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

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

1 个答案: