Prototype.js はどのようにしてテキストエリアのサイズを自動的に変更できるのでしょうか?

プロトタイプを使用したテキストエリアの自動サイズ変更

ユーザー インターフェイスを設計するとき、さまざまな量のテキストに合わせてテキストエリアのサイズを自動的に変更することが望まれることがよくあります。 JavaScript フレームワークである Prototype は、この効果を達成するための簡単なソリューションを提供します。

垂直方向のサイズ変更

垂直方向のサイズ変更は、テキストエリアを垂直方向に拡大または縮小できる実用的なアプローチです。テキストの行数に基づいて決定されます。 Prototype を使用してこれを実装するには、次のコードを使用できます。

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

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

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

このコードでは、resizeIt 関数が定義されています。ワードラップの可能性を考慮して、改行文字でテキストを分割し、各行に 1 つずつ追加することで、テキストエリア内の行数をカウントします。次に、関数は textarea の rows 属性を計算された行数に設定します。

関数のアクティブ化

サイズ変更動作をアクティブにするには、resizeIt 関数をバインドします。次の方法でキーアップやキーダウンなどのイベントを実行します:

Event.observe('textarea_id', 'keydown', resizeIt );

例使用法

次の例は、テキストエリアで autosize 関数を使用する方法を示しています。

<textarea></textarea>

このコードは、1 行 50 列のテキストエリアを作成し、自動的にサイズを変更します。入力されたテキストをそのまま収容します。

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