2009-10-19 10 views
16

私は、ユーザーのリサイズテキストエリアコントロールを提供したいと考えています。私はこれを行って、他の多くの実装を見てきましたが、私のすべての要件を満たすものを見つけることはできません。ページが(すなわちないQuirksモードで)標準準拠モードでレンダリングされているWindowsとOS X上究極のリサイズテキストエリアの検索

  • のWindowsとFirefox 3のIE6、IE7、IE8で動作し、3.5:具体的に私はそれを制御したいです。
  • 元に戻すバッファ/元に戻したスタックを混乱させません。これはIEの特に問題です。ノードの追加、ノードの削除、その他のDOM操作は入力バッファをリセットします。実装がこれらのテクニックに依存する場合、UNDOは標準のテキストエリアコントロールと同じように動作しません。私はthis noteを除き、このバグに関する多くの情報を見つけることができませんでした。 jQuery Auto Growing Pluginのような実装は、この問題を抱えています。IEの変更を元に戻し、これが標準のテキストエリアとどのように作用するかを比較してみてください。この問題を実証するexample pageをJSBinに追加しました。
  • コントロールを超えることができない最大の高さです。
  • コンテンツが削除されるときに適切に縮小します。
  • キーを押したときに奇妙に揺れたり、奇妙に動作したりしません。例えばjQuery Auto Growing Textareaコントロールは、コントロールが初期サイズを超えて成長したときに、少なくともIE7で不思議な動作をします。
  • コントロールで固定幅/モノスペースフォントを使用する必要はありません。

Facebookのステータス更新フィールドは、コンテンツの編集可能なdiv要素として実装されていますが、divを使用するとこのような要素の使用に関するいくつかの予約があります。

  • 境界線を明示的にスタイルする必要があります。つまり、ネイティブテキスト領域とは異なる境界線になる可能性があります。
  • コンテンツを実際のテキストエリアと同期させる必要があります(双方向でも可能でしょうか?)。
  • テキストエリアの位置を基準にしてヒントやその他の要素を配置するときに複雑さが増します。
  • この方法はFacebookのステータス更新のようなものですが、何百もの標準入力要素を含むフォームではうまくいくでしょうか?

上記で説明したのは、「究極のリサイズテキストエリア」を表しています。既存のアプローチの問題と認識しています。そのようなコントロールは存在しますか?そのようなコントロールを書くことは可能ですか?

+1

"何百もの標準入力要素を含むフォームではどれくらいうまく機能しますか?"同じページにこれらのウーバーテキストエリアがたくさん使用されますか? – Tom

+0

潜在的に、はい。 Facebook(またはGoogle Docs)のものは、ページ上の1つのcontentEditable要素を扱う必要があるということだけです。これは明らかに20+を扱うよりはるかに簡単です。 –

答えて

6

(フォームの終わりにテキスト領域)このdemo pageの詳細を参照してください。これは、密接にあなたの要件に来

DOJO tools text area control

をチェックしてください。

+0

Strange - デモページでIEの元に戻すスタックに問題はないようですが、最初のリンクから例をコピーすると問題はありません。 –

2

ディスプレイのサイズを自動調整したいですか?コンテンツを同じにしておきますか?あなたはこれらの要件を満たすためにあなた自身をロールバックする必要があるかもしれないすべてのスクリプトは、実行する表示を調整し、あなた自身のテキストの詳細を参照させることができますです

...

+0

はい、上記の基準に基づいてコンテンツのサイズを変更するテキストエリアが必要です。 –

+2

くそ、それは厳しい要求です:p –

3

これはスタートになる可能性があります。

http://tuckey.org/textareasizer/は(ただし、試してみて、あなたの中のeval()を避けるため)

http://www.felgall.com/jstip45.htm

http://viralpatel.net/blogs/2009/06/textarea-resize-javascript-jquery-plugin-resize-textarea-html.html

これは実際には良いjQueryプラグインのように思えます。 私はこのような開発に取り組んでいるかもしれません。私がそれを済ませたら、ここに投稿します。

は、私が何かを開発し、数時間を過ごしたが、その後、私は本当に良いように思わこれを見つけました。

http://www.aclevercookie.com/demos/autogrow_textarea.html

+0

ViralPatelのソリューションは、私が興味を持っているコントロールとは少し異なるコントロールを作成する方法を詳しく説明しています。 –

+0

コンテンツが削除されても、Stephen Chapmanのソリューションは縮小しません。 –

+0

テキスト領域Resizerは、Firefoxを使用しているときに縮小するときに問題があります。 –

0
+0

SitePointの記事(3部構成)はテクニックに関する有用な観察を行いますが、ソリューションがDOMを操作するためIEのアンドゥスタックを破壊します。 –

+0

ViralPatelのソリューションは、私が興味を持っているコントロールとは少し異なるコントロールを作成する方法を詳しく説明しています。 –

+0

スマートエリアは、特にInternet Explorerで問題が縮小しているようです。 –

0

私はnicEditを使用しています。それはあなたが必要とするすべてを持っているように見え、スクリプトはMITライセンスで1700行しかないので、必要な変更を加えることができます。

+0

nicEditは、私が避けようとしているcontentEditable技術に依存していますが、おそらくこの手法に関する私の予約は不当です。 –

2

This A List Apart postはあなたの基準を満たすことにかなり近い見て、何が起こっているかの良い説明が含まれている実装が含まれています。

関連する問題