contentEditable div 要素があります。編集可能領域で最初にキーを押したときに、次のロジックを使用してコンテナーの <p> タグを作成します。
var c = (32 == key ? '\u00A0' : String.fromCharCode(key));
var e = document.createElement('p');
var sel, rng;
e.appendChild(document.createTextNode(c));
this.editDocument.appendChild(e);
sel = window.getSelection();
rng = document.createRange();
rng.selectNodeContents(e);
rng.collapse(false);
sel.removeAllRanges();
sel.addRange(rng);
私が抱えている問題は、次のキープレス イベントで、Firefox が新しい文字と後続の文字のコンテナとして別のテキスト ノードを作成することです。これは、私の p タグが兄弟として 2 つのテキスト ノードを持つことを意味します。Google Chrome と Opera はこれを行いません。この余分なテキスト ノードにより、元に戻す/やり直しシステムに問題が生じます。この元に戻すシステムは、キャレットの位置をノード オフセットの配列として保存します。contentEditable div の内容は、innerHTML を使用して保存および復元されます。ただし、この方法でコンテンツを復元すると、以前は Firefox では 2 つあったテキスト ノードが 1 つしか作成されず、エラーが発生します。この動作 (余分なテキスト ノードの作成) が Firefox で意図的なものなのか、それともおそらくバグなのか疑問に思っています。提案やアドバイスをいただければ幸いです。