自動拡張Textarea jQueryプラグインを構築する方法、パート1

テキスト領域を自動的に拡張することは、Facebookなどのサイトで非常に人気があります。テキストエリアボックスの高さは、ユーザーが入力したテキストの量に応じて拡張および縮小します。これにはいくつかの利点があります：

1. ページのデザインは、大きなテキストエリアボックスに支配されません。
2. 複数のテキスト領域を持つオンラインフォームは、短くて完了しやすく見えます。
3. ユーザーは、スクロールせずにすべてのテキストを表示できます。

拡張されたテキスト領域のデモンストレーションを表示...

この3部構成のチュートリアルでは、HTMLと再利用可能なjQueryプラグインを使用して自動的に拡張されたテキスト領域を構築する方法について説明します。第3部の終わりまでに、あなたはそれがどのように機能するかを理解し、あなた自身のプロジェクトで使用できるコードを持っているでしょう。

需要

すべての優れた開発者と同様に、システムの要件を完全に理解する必要があります。

必要な場合は、任意のページのテキスト領域を自動的に拡張する必要があります。

ただし、一部のテキスト領域では自動拡張を必要としない場合があります。
テキスト領域の高さが（a）無限に成長するか、（b）特定の範囲内で成長することを指定できる必要があります。たとえば、50〜200ピクセルの最適な高さを使用する必要があります。
私たちのソリューションは、選択したすべてのページで再利用可能である必要があります。
高度な拡張技術を使用して、JavaScriptのないユーザーが標準のテキストエリアボックスを使用できるようにする必要があります。
このソリューションは、IE6、Firefox 2、Opera、Safari、およびChromeと互換性がある必要があります。
6. 提案

ソリューションをjQueryプラグインとして実装します。 jQueryは、主に、DOMスニッフィングやイベントの委任などのよりありふれた側面を処理するために使用されます。

しかし、テキスト領域のサイズをいつ変更する必要があるか、どの高さを使用するかをどのように知ることができますか？

最初に、「キーアップ」イベントハンドラーを任意のテキスト領域に割り当てることができます。これは、キーが押されてテキストが変更された直後に関数を呼び出します。

dom scrollheightプロパティを確認できます。これにより、内部スクロール部分の高さ、つまりユーザーが入力したテキストの高さが返されます。テキスト領域の高さを現在のScrollheight値に設定すると、Scrollbarは無関係になります。残念ながら、ScrollheightはW3Cの推奨ではありません。いくつかのクロスブラウザーの矛盾を克服する必要があります：

Firefox、Safari、およびChromeでは、テキストが追加されていなくても、Scrollheightはテキスト領域の高さよりも小さくなることはありません。したがって、ボックスは拡大しますが、テキストを削除することは縮小しません。テキスト領域の高さを一時的に0pxに設定し、
• 実際のscrollheight値を適用することにより、この問題を解決できます。
Mozilla Scrollheightのドキュメントに反して、Firefoxにはテキストエリアのパディングが含まれていないようですが、Safari 4とChrome 2にはそれが含まれています。上部と下部に2pxのパディングがある場合、ScrollheightはWebKitブラウザで4px大きくなり、テキスト領域の高さは無限に増加します。パディングを引くとFirefoxが破損するため、最も簡単な解決策は、拡張されたテキストエリア要素に0pxの垂直パディングを適用することです。
ScrollheightはIEとOperaで奇妙です。通常、内部テキストの真の高さを返しますが、テキスト領域の高さを0pxに設定すると、誤ったScrollheight値が返されます。ブラウザのスニッフィングはひどいですが、この場合には他の選択肢がないと思います。 IEとOperaがテキスト領域の高さを0pxに設定しないようにする必要があります。

また、Scrollbarを考慮する必要があります。デフォルトでは、ほとんどのブラウザは、必要に応じてテキストエリアスクロールバーのみを表示します。ただし、オーバーフローを「自動」に設定すると、新しいラインを追加するとスクロールバーが表示され、テキスト領域の高さを変更すると消えます。オーバーフローを「非表示」に設定すると、点滅するスクロールバーの問題が解決しますが、これは、指定された最大高さを超えて拡張された非拡張テキスト領域またはテキスト領域に適用されないでください。

最後に、ブラウザのウィンドウのサイズ変更が問題になる可能性があります。 Fluid Web Designは、パーセンテージベースの幅でテキスト領域を実装できます。ウィンドウのサイズを検出できますが、イベントはIEでパフォーマンスが低下し、ハンドラーをすばやく呼び出します。この問題を解決することはできますが、複数のテキスト領域を変更すると、ページデザインがジャンプしてユーザーを混乱させる可能性があります。したがって、サイズを変更した後、ユーザーがボックスにフォーカスを切り替えた後にのみ、テキスト領域の高さを調整します。

吸収すべきコンテンツがたくさんありますが、もっと多くのコンテンツがあります！コーヒーを一杯作り、2番目の部分の準備をしてください...

パート2：テキスト領域の初期化
パート3：javaScriptプラグインコード
jQueryプラグインの開発方法

以上が自動拡張Textarea jQueryプラグインを構築する方法、パート1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。