使用 Prototype 实现自动调整大小的 TextArea

要增强内部销售应用程序中的用户体验，请考虑向用于送货地址的文本区域。以下是实现此目的的详细指南：

目标是创建一个可以动态调整其高度以适应文本输入的文本区域，确保最佳的空间利用率和可读性。为此，我们将利用 JavaScript 框架 Prototype。

首先，将必要的 JavaScript 代码添加到您的页面中：

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount  = 1   Math.floor(l.length / cols); // Consider long lines
  })

  $('iso_address').rows = linecount;
};

此代码根据字符数、列宽和换行符计算文本区域中文本的行数。结果值被分配给文本区域的“rows”属性，从而有效地调整其大小。

要激活自动调整大小，请将 resizeIt 函数附加到适当的事件。例如，您可以使用 keyup 捕获文本输入更改：

Event.observe('iso_address', 'keyup', resizeIt);

当文本区域首次加载时，调用 resizeIt 函数初始化高度：

resizeIt();

通过此实现，文本区域将根据用户自动调整其高度类型，优化表单的垂直空间并确保地址信息以可读的方式呈现。