如何使用 Prototype.js 實作自動調整文字區域大小的功能？

使用原型實現自動調整大小的TextArea

要增強內部銷售應用程式中的使用者體驗，請考慮傳送地址的文字區域。以下是實現此目標的詳細指南：

目標是建立一個可以動態調整其高度以適應文字輸入的文字區域，確保最佳的空間利用率和可讀性。為此，我們將利用 JavaScript 框架 Prototype。

首先，將必要的 JavaScript 程式碼計算基於字元數、列寬和換行符的文字區域。結果值被指派給文字區域的“rows”屬性，從而有效地調整其大小。

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

要啟動自動調整大小，請將 resizeIt 函數附加到適當的事件。例如，您可以使用keyup 捕獲文字輸入變化：

當文字區域首次載入時，呼叫resizeIt 函數來初始化高度：

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

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

以上是如何使用 Prototype.js 實作自動調整文字區域大小的功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！