のcontentEditable +のSelectAll：Firefoxは、動的に生成されたコンテンツ

Question

上のキーボード入力が、私はcontenteditable="true"属性を含む、動的に生成された要素を持つFirefoxの問題（他のブラウザでは正常に動作するように見える）抱えていることができません。私ならば

をselectAll （動的に、またはマウスで）、Firefoxはキーボード入力を許可しません。

参照のため、私のjsFiddle Exampleをご覧ください。これはFirefoxにのみ影響するようです。

$(document).ready(function(){ 
$('.edit').live('dblclick', function() { 
    document.execCommand('selectAll',false,null); 
}); 

$('#live').append('<p class="edit" contenteditable="true">This content is generated. Firefox will not allow keyboard input when "ALL" is selected.</p>'); 
}); 

編集：ここでは は、私が働いている実際のアプリ（ほこりをご容赦）である：cr8.me/app/ff.html - 私が望んだ何を（すべてのテキストを選択するにはダブルクリックします）注をクリックすることです、カテゴリ、または計画タイトルを編集します。それは誰のために働くのですか？たぶんそれは私の設定か貧弱なスクリプトです。線137と572は関連しています。

Answer 1

どうやらFirefoxはスパン要素上のcontentEditableの問題（私はそれが他の表示の場合だと仮定しています：私はそれをテストしていませんでしたけれども、インライン要素）を持っています。 問題は単にスパンをdivに置き換えてと解決できます。さらに、divは、 "display：inline"プロパティをCSSで設定しても問題なく動作します。

ここでの作業例を確認してください：http://jsfiddle.net/6sTJh/5/。 "Add buggy"というラベルの付いたボタンは、contenteditable属性を持つスパンを動的に追加し、期待通りに機能しません。 "Add working"ボタンはcontenteditable属性を持つdivを追加します。

あなたのアプリは - すべてのコンテンツ編集可能なスパンをdivに置き換えたとき、編集はfirefox 3.6とfirefox 6.0でうまくいきます。

サイドノート：アプリケーション・コードについては - （あなたがすべてのノートに同じID「ノート・タイトル」でやっているように）複数のノードに同じIDを使用していないか、あなたのことができますさまざまなブラウザから予期しない動作が発生します。

Generaleルールは、特定のIDを持つ要素を1ページに1つだけ持つことができます。 クラスを使用して、複数の要素を「グループ化」し、後で選択してください。