使用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();

透過此實現，文字區域將根據使用者自動調整其高度類型，優化表單的垂直空間並確保地址資訊以可讀的方式呈現。