プロトタイプを使用してテキストエリアを垂直に自動サイズ変更する方法?

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

コンテンツに基づいてテキストエリアのサイズを自動的に変更することでユーザー エクスペリエンスを向上させるという概念を拡張して、詳しく見てみましょう。を使用した詳細な解決策プロトタイプ。

垂直方向のサイズ変更の実装

さまざまな行の長さに対応するには、垂直方向のサイズ変更が実行可能なオプションであることがわかります。テキストが占める行数を計算することで、それに応じてテキストエリアの行を調整できます。

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); // Take into account long lines
  })

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

キーストロークのイベント リスナー

キーストロークごとにタイムリーなサイズ変更を保証するためキーストロークで、イベントリスナーをtextarea:

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

水平方向のサイズ変更に関する考慮事項

水平方向のサイズ変更は望ましいように見えますが、ワードラップや長い行による課題があり、レイアウトの問題が発生する可能性があります。したがって、ほとんどの場合、垂直方向のサイズ変更が推奨されます。

統合例

提供されている HTML JavaScript の例では、テキストエリアを有効にして、実際の設定で自動サイズ変更機能を示しています。ユーザーのテキスト入力の変化に応じて垂直サイズを調整します。

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