ユーザー エクスペリエンスを向上させるために Prototype.js を使用してコンテンツに基づいてテキストエリアのサイズを動的に変更する方法

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

コンテンツに合わせてテキストエリアのサイズを動的に変更すると、不必要なスクロールがなくなり、ユーザー エクスペリエンスが向上します。この場合、大きなフォント サイズで読みやすさを維持しながら垂直方向のサイズ変更を実現することを目指します。

ソリューションのプロトタイプ作成

プロトタイプを使用すると、次のようにサイズ変更機能を実装できます。

<code class="js">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);
  })

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

Event.observe('iso_address', 'keydown', resizeIt);</code>

このコードは、テキストの内容とテキストエリアの幅に基づいて行数を計算します。これは keydown イベントによってトリガーされ、新しく入力された文字を確実にキャプチャします。

垂直方向のサイズ変更のみ

水平方向のサイズ変更は意図しない結果につながる可能性があるため、特に垂直方向のサイズ変更を対象としています。特にワードラップや長い行の場合は注意が必要です。

実装に関する考慮事項

コードは、textarea に 'iso_address' ID があることを前提としています。アプリケーションで必要に応じてこれを調整してください。

このコードはテキストエリアの垂直方向のサイズを効果的に変更しますが、大量のテキストやパフォーマンス重視のアプリケーション向けに最適化されていないことに注意することが重要です。このようなシナリオでは、追加の最適化とテストが必要になる場合があります。

以上がユーザー エクスペリエンスを向上させるために Prototype.js を使用してコンテンツに基づいてテキストエリアのサイズを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。