プロトタイプを使用してテキストエリアのサイズを垂直に変更する: 高さをコンテンツの長さに適応させるには?

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

ユーザー エクスペリエンスを向上させるために、テキストエリアの動的サイズ変更が必要になるシナリオが発生する場合があります。ここでは、Prototype を使用して垂直方向のサイズ変更を実装する方法を検討します。

シナリオ コンテキスト

ユーザー アドレスを取得するためのテキストエリアを含むフォームを開発しているとします。デフォルトでは、テキストエリアは固定領域を占有するため、アドレスが短い場合は空きスペースが残り、アドレスが長い場合はオーバーフローする可能性があります。テキストエリアのサイズを動的に変更すると、高さをコンテンツの長さに合わせて調整することで、この問題が解決されます。

プロトタイプの実装

プロトタイプを使用して垂直方向のサイズ変更を実装するには、次の JavaScript コードを検討してください。

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

このコードは、テキストエリアの値、列数、コンテンツ行を取得することによって初期化します。次に、テキストを行に分割し、長さを列数で割ることにより、必要な行数が計算されます。結果はテキストエリアの rows 属性に保存されます。

サイズ変更を有効にするには、keyUp や keyDown などのイベント リスナーをテキストエリアにアタッチできます。この例では、ユーザーが入力を終了した後に調整が行われるようにするために keyUp が使用されています。さらに、ページの読み込み時に ResizeIt() を呼び出すと、初期の高さが正しく設定されます。

利点と考慮事項

垂直方向のサイズ変更は、テキストエリアの高さを動的に調整することでユーザー エクスペリエンスを向上させます。コンテンツの量を減らし、不必要なスペースやスクロールを排除します。ただし、水平方向のサイズ変更は、単語の折り返しや行の長さの変化により現実的ではない可能性があることに注意することが重要です。

予防措置として、過剰な量のテキストを含むテキストエリアにはこのコードを使用しないことが賢明です。インパクトのあるパフォーマンス。そのことを念頭に置いて、提供されたコードは出発点として機能し、特定のニーズに合わせて改良する必要がある場合があります。

以上がプロトタイプを使用してテキストエリアのサイズを垂直に変更する: 高さをコンテンツの長さに適応させるには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。