ホームページ > ウェブフロントエンド > CSSチュートリアル > プロトタイプを使用してテキストエリアを垂直に自動サイズ変更する方法?

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

Susan Sarandon
リリース: 2024-12-14 00:56:10
オリジナル
934 人が閲覧しました

How to Autosize a Textarea Vertically Using Prototype?

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

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

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

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート