プロトタイプを使用した自動サイズ変更 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();

この実装では、テキストエリアはユーザーの操作に応じて高さを自動的に調整します。タイプを調整し、フォームの垂直方向のスペースを最適化し、住所情報が読みやすい方法で表示されるようにします。