Prototype.js を使用してテキストエリアの自動サイズ変更機能を実装するにはどうすればよいですか?

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

この実装では、ユーザーが入力するとテキストエリアの高さが自動的に調整され、フォームの垂直方向のスペースが最適化され、アドレス情報が読みやすい方法で表示されます。

以上がPrototype.js を使用してテキストエリアの自動サイズ変更機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。