HTML divのコンテナを使ってテキストエリアをシミュレートする

Question

ちょっとしたWYSIWYGエディタを作成したいと思います。 アイデア： まず、テキストを書き込んで変更する機能を追加します。そこで、onClickとonKeyBoard Listenerをdivコンテナに追加します。私がdivをクリックすると、 "フォーカスされた"という名前のvaraibleがtrueに設定されました。キーイベントが発生すると、フォーカスされているかどうかがチェックされます。フォーカスが偽である場合、カーソルの位置に新しいチャーターが追加されます。

私の質問： これは正しい方法ですか？他のエディタがどのようにテキスト入力を処理しているかを調べようとしましたが、それを得ることができませんでした。

これが正しい場合は、どうすれば点滅するカーソルをシミュレートできますか？テキストエリアではカーソルが点滅しますが、divコンテナについては誰ですか？クリックするとカーソルが非表示になります。

Answer 1

私はあなたが楽しい/実践のためにこれをやっていると仮定しています。あなたがプロフェッショナルな理由でこれをやっているのであれば、ホイールを改造せずにCkeditor,tinyMCEまたはYUIのようなものを使用することを強くお勧めします。

そう言われています。あなたはevent handlingを調べる必要があります。具体的には、フォーカスに関する質問については、hereをご覧ください。あなたが記述している方法（変数を真/偽に設定する）は、問題に直面するようです。標準のイベント属性（ "focus"変数をonclickに設定するのではなく）を使用する場合は、実行する関数を定義して、聴いている要素に対してonfocus/onblur属性として設定する必要があります。

これは、mootools、jquery、extJSなどのjavacriptライブラリを使用していない場合です。これらのうちの1つを使用している場合は、独自のイベント処理方法がある可能性が高いため、イベントハンドラの実装方法

もう1つ注意してください。あなたが本当にdivを超えてテキストエリアを使用している必要があります（私が誤解している場合を除き、ユーザがあなたのdivに焦点を当てたときに何かをやりたければ）。 divのテキストエディタを完全に改革するためにのみjavascriptを使用している場合は、あなたのウェブページはjavascriptなしでは機能しません。テキスト領域を保持している場合。ユーザーはまだ情報を入力することができますが、フォーム送信のためにテキストコンテンツを取得する利点はありますが、divを使用すると、WebページはJavaScriptなしでは役に立たなくなります。