javascript - 使 Textarea 足以完全适合 maxLength 属性

Question

我的表单中有不同的文本区域，它们具有不同的最大长度。因此，我试图在开始时调整我的 textares 的大小，以便最大字符可以容纳在那里而无需调整框的大小。我的第一次尝试是固定列数，然后计算行数。这一直有效，直到 css 发挥作用并且我的文本框总是太大，因为它们比列中的值宽。

我想要实现的是文本框足够大以适合文本(不像图片中那样)。

Answer 1

首先，据我所知，浏览器没有这方面的功能，然后你在这里遇到了一些问题。您不能将 textarea 设置为确定的高度，因为它在很大程度上取决于您使用的 CSS 和您编写的文本。

在您的屏幕截图中，您没有使用等宽字体，这意味着根据您的用户所写的内容，文本会更长或更短，即使他们使用相同数量的字符也是如此。以这两个例子为例:

文本 1:

iiiii

文本 2:

WWWWW

如果您不选择使用等宽字体，这两个引号都有 5 个字母并且长度不同。

如果您使用等宽字体，textarea 的大小仍然取决于您使用的特定字体。 Courier 比 Monaco 更宽，我想，只是举个例子。

当然，根据 textarea 的宽度，它的高度必须改变。

过去，这个问题必须由 JavaScript 在自动调整大小 textarea 的关键字下解决。为此有多种技术。基本上他们所做的是

1. 将 keydown 事件监听器添加到您的 textarea
2. 每当用户输入时，使用一些“魔法”来测量您的文本
3. 调整您的 textarea 以适合您的文本

这就是一个例子:https://codepen.io/vsync/pen/czgrf

现在您可以使用该示例，并且根据您的特定应用程序，仅在页面加载时执行一次并具有最大数量的字母，或者，如果您已经知道字体字母的大小，请事先进行一些计算并在代码中烘焙(硬编码)尺寸(针对多个视口(viewport))。

我认为最后一件事是最明智的解决方案。