Firefoxのカーソルが見えなくなり、何かをクリックしたときに表示される

Question

私は今まで遭遇したことのない、もっとも不思議なバグがあります。これ（または巧妙な回避策）をデバッグする方法に関するアイディアを持っている人は誰でも素晴らしいだろう。

問題：

私はのcontentEditableを使用してFirefoxで簡単なWYSIWYGエディタを作ってるんです。この問題は、テキストを読み込んでajaxで編集するときに表示されます。ロードの前に、カーソルが細かく（1秒間に）表示され、テキストがロードされると消えます。あなたはまだテキストを入力することができますが、カーソルは確かにまだそこにあります（ステータスボックスには現在の行/列が表示されます）が、カーソルは表示されず、選択オーバーレイは表示されません。

これは本当に奇妙なものです：他のDOM要素でも、ファンドバグ上、他のウィンドウ上でも、どこでもクリックすると、カーソルが元に戻り、正常に動作します。実際、カーソルが問題を抱える唯一の時間は、最初にページを読み込んだり、リフレッシュしたりするときの頃です。 contentedtable div内のどこかをクリックしても修正されません。更新するには、外側をクリックする必要があります。

今、回避策が必要です。私は$（someelement）.clickまたは$（somelement）.focusの500種類のフレーバーを試しましたが、ユーザーからの実際のクリックを完全に複製するわけではありません。

誰もこのようなことを見たことがありますか？ありがとう。

Answer 1

だまあ、私は、問題を引き起こしているものを見つけることができませんでしたが、私は間に合わせとフィックスはトリックを行いました。私はちょうどアンカータグをDOMに追加し、フォーカスを合わせ（jQuery .focusを使って）、それを削除します。

私は以前何度もフォーカスを試みましたが、私はいつもトリックをやっていないdivやli要素で試してみました。アンカータグである必要があります。私はアンカータグが実際にいくつかの視覚的な要素をフォーカスに持っているためだと思う。これはfirefoxの内部カーソル表示機構で何かをリセットする。

いずれにしても、このような問題を解決しようとしていてこれを修正できない場合は、MorganTileyの説明をご覧ください。

Answer 2

これは、コンテンツを読み込むときにhtmlノードの構造が変更され、選択が無効になるためです（カーソルは折りたたまれた選択肢です）。 Rangyでリセットすることをお勧めします。これはjqueryと組み合わせてうまく動作します。 contentEditable領域の最初の要素を取得するには、jqueryを使用します。新しい段範囲を作成し、その段落（ノード）を選択して折り畳んで開始します。これはあなたのコンテンツの冒頭にカーソルを置きます。ここではいくつかの大まかなコード

$(document).ready(function() { 
    //init rangy 
}); 

function ajaxLoaded { 
    var p = $(".contenteditablediv p:first")[0]; 
    var sel = rangy.getSelection(); 
    sel.collapse(p, 0); 
}