プロトタイプ JavaScript を使用して自動サイズ変更 TextAreas を実装するにはどうすればよいですか?

プロトタイプを使用して TextArea のサイズを自動的に変更する方法

視覚的に魅力的なユーザー エクスペリエンスを実現するには、以下に基づいて高さを調整する TextArea が必要な場合があります。そのテキストの内容。以下では、Prototype JavaScript フレームワークを使用したソリューションを検討します。

垂直方向のサイズ変更

垂直方向のサイズ変更は、Facebook がウォール投稿を編集するときに実証しているように、一般的な実装です。これにより、余分なスペースを空けずにテキストエリアにすべてのテキストが収まるようになります。

JavaScript の実装

プロトタイプを使用した垂直方向の自動サイズ変更を示す JavaScript コード スニペットです:

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); // Consider long lines
  })

  $('textarea-id').rows = linecount;
};

使用法

自動サイズ変更を実装するには、次のように特定の textarea 要素の 'keydown' イベントに付加できます。

Event.observe('textarea-id', 'keydown', resizeIt );

水平方向のサイズ変更

水平方向のサイズ変更は、ワードラップ、長い行、その他のレイアウトの問題に関する潜在的な問題があるため、推奨されません。

結論

JavaScript を使用してテキスト領域の自動サイズ変更を行うと、より動的でユーザーフレンドリーなインターフェイスが提供されます。プロトタイプを使用して提供されているコードは、垂直方向のサイズ変更に対するシンプルで効果的なソリューションです。ただし、実装を検討するときは、水平方向のサイズ変更の制限と潜在的な課題に留意してください。

以上がプロトタイプ JavaScript を使用して自動サイズ変更 TextAreas を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。