2009-04-13 9 views
0

私はコンテンツの編集可能なdivを扱っています。文字がdivに追加される前と後の両方でキーストロークをキャプチャする必要があります。イベントキャプチャとcontentEditable divのバブリング

キャプチャとバブリングについての私の理解は、イベントがドムツリーの最高レベルで最初にキャプチャされ、次にそれを渡します。バブリングでは、最も低いレベルで開始し、ツリーをバブルアップします。

キャプチャフェーズでイベントリスナーを追加した場合、編集可能なdivのコンテンツにはのテキストが反映され、のキーストロークが送信されていたと考えました。バブリング段階でイベントリスナーを追加すると、divのテキストコンテンツには、今入力した文字が含まれます。

イベントのリスナーがキャプチャまたはバブリングフェーズで追加されても、divのコンテンツには直前に入力された文字は含まれません。ここで

はそれを試してみるために、簡単なテストケースである:

<div id="captureTest" contentEditable='true' style='height: 30px; width: 400px; border-style:solid; border-width:1px'></div> 

<script type="text/javascript"> 
    var div = document.getElementById('captureTest'); 
    div.addEventListener("keydown", function() {alert('capture: ' + this.innerHTML)}, true); 
    div.addEventListener("keydown", function() {alert('bubble: ' + this.innerHTML)}, false); 
</script> 

私は2番目の関数の出力が文字を入力した後のdivの新しいテキストを含めることを期待するが、これはしていないようですケース。

私の質問は:コンテンツ編集可能なdivからキーストロークイベントをキャプチャしてコンテンツが得られるかどうかキーが入力された後ですか?私は先読み機能を実装するためにこれが必要です。

私はイベントを停止してからexecuteCommand( 'insertHTML')を使用することができますが、これは削除、バックスペース、ペースト、およびその他のタイプの挿入を処理する際に分解されます。

Firefox 3でこれをテストしています。IEにはaddEventListenerメソッドがありません。

ありがとうございました!

答えて

2

あなたは、2つの異なるコールバック、のKeyDown用と(要素がKeyDownイベント+からkeyupの両方を登録したときにのみ起動されます)からkeyupまたはキー入力と別のものを必要とします。

関連する問題