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

I'm trying to resize a textarea to fit the content in it, as tightly as possible. Here's my current effort:

我正在尝试尽可能紧密地调整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;
}

This works fairly well, but seems to fail when the user "pushes" text onto the next line by filling up the width. (Note: the 75 used here is representative of the width of my textarea in characters)

这种方法效果很好,但是当用户通过填充宽度将文本“推”到下一行时似乎失败了。 (注意:这里使用的75代表我的textarea的宽度,以字符表示)

There's also an odd effect where [enter][key] makes the textarea 2 lines past the end of the text, then the next [key] takes it back to the expected one extra line. I've tried just setting c to 2 if c<=1, with no effect. This one isn't a huge deal, but it would be nice to correct.

还有一个奇怪的效果,其中[enter] [key]使textarea 2行超过文本的末尾,然后下一个[key]将其带回预期的一个额外行。如果c <= 1,我尝试将c设置为2,没有效果。这个并不是什么大不了的事,但纠正它会很好。

Any help would be appreciated.

任何帮助,将不胜感激。

Note: this function is called on key down.

注意:此功能在按键时调用。

1 个解决方案

#1

Your code fails because there is no such method as Math.ceiling(), it's called Math.ceil() instead.

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

Beside that...

All the variables inside your function are global. This is not a good practice - you should always add var keyword to your variable declarations to make the variable private to that function - otherwise you might accidentally modify some global variable and cause really bad stuff to happen. Use JSLint to check your code for problems like that.

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

It's also not good to hard-code the width of the text area into your function. This way you can't use your resizing function for other textareas that may have different width. In the current case it's probably best to read the width dynamically from the cols attribute of textarea.

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

Renaming your variables to something more meaningful than a, b, c would also improve the readability quite a lot.

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

For example:

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;
}

I suggest you also study the answers for SO post Autosizing Textarea, pointed out by Triptych.

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

#1