调整文本框大小以适应所有内容

3

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

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设置为2,如果c<=1,但没有效果。这个问题并不是很严重,但纠正它会更好。

任何帮助都将不胜感激。

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


2
确切的重复:https://dev59.com/C3VD5IYBdhLWcg3wWaRh - Kenan Banks
1个回答

8

你的代码失败是因为没有Math.ceiling()这样的方法,应该使用Math.ceil()

另外...

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

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

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

例如:

该函数用于调整文本框的大小。它首先将文本框中的文本按行分割,然后计算每行文本的长度,如果长度大于文本框的宽度,则将该行文本拆分成多个部分并计算所需的行数。最后,将所有行数加在一起,并将结果设置为文本框的行数。建议也查看 Triptych 提出的 SO 帖子 Autosizing Textarea 的答案。

我正在修改我在网上找到的一个函数。我最近尝试从floor更改为ceiling。 - Alex S

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接