6

私はこれまでに遭遇した中で最も奇妙なバグを抱えており、これについてはもう限界に近づいています。これをデバッグする方法 (または巧妙な回避策) についてアイデアを持っている人は誰でも素晴らしいでしょう。

問題：

contenteditable を使用して、Firefox で単純な WYSIWYG エディターを作成しています。ajax経由で編集するテキストをロードすると、問題が発生します。読み込み前はカーソルが正常に表示され (一瞬)、テキストが読み込まれると消えます。テキストを入力することはでき、カーソルは間違いなく「そこ」にあります (ステータス ボックスに現在の行/列が表示されます) が、カーソルは表示されず、選択オーバーレイは表示されません。

これが本当に奇妙である理由は次のとおりです。どこでも、他のdom要素、firebug、さらには別のウィンドウをクリックすると、カーソルが戻り、通常のように動作します。実際、カーソルに問題が発生するのは、最初にページをロードするとき、または更新するときだけです。contentedtiable div 内の任意の場所をクリックしても修正されません。更新するには、外側をクリックする必要があります。

今のところ、回避策が必要です。$(someelement).click または $(somelement).focus の 500 種類を試しましたが、ユーザーからの「実際の」クリックを完全には再現しません。

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

4

2 に答える 2

6

問題の原因はわかりませんでしたが、簡単な修正方法で問題が解決することがわかりました。DOM にアンカー タグを追加し、(jQuery .focus を使用して) フォーカスし、削除します。

以前に .focus を何度も試しましたが、常に div または li 要素で試しましたが、うまくいきませんでした。アンカータグである必要があります。これは、アンカー タグに実際にフォーカスする可視コンポーネントがあり、Firefox の内部カーソル表示メカニズムで何かがリセットされるためだと思われます。

いずれにせよ、このような問題を解決しようとしていて、これで解決しない場合は、MorganTiley の説明を参照してください。

于 2012-06-05T19:25:10.993 に答える
2

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

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

function ajaxLoaded {
  var p = $(".contenteditablediv p:first")[0];
  var sel = rangy.getSelection();
  sel.collapse(p, 0);
}
于 2012-06-05T14:07:01.570 に答える