0

私は IE でこの問題に頭を悩ませています。contenteditable 属性が「true」に設定された要素があります。内部にはさまざまな要素があり、その一部は変更できません。テキストは、CSS クラス名「uneditable」を使用してスパンでラップされています。

「keydown」イベントのハンドラーを使用して、セレクションの anchorNode が検査されます。anchorNode が編集不可能な要素の textnode である場合、範囲は変更され、編集不可能な要素ノードの後に​​開始するように設定されます。これは、IE と呼ばれる忌まわしきものを除いて、すべてのブラウザで完全に機能します。

次の例を見てください。

Lorem ipsum dolor sit <span class="uneditable">amet</span>, 
consectetur adipisicing elit

キャレットが編集不可能な要素の最後にある場合、押された文字キーは次のテキスト ノードの先頭に追加されます。しかし IE では、テキストは編集不可能な要素の最後に追加されます。

ハンドラーは次のとおりです。 

$("#myeditor").keydown(function(ev) 
{ 
    var sel = rangy.getSelection(); 
    var range = sel.getRangeAt(0); 
    if (sel.anchorNode.nodeType == 3) 
    { 
            if ($(sel.anchorNode.parentNode).is(".uneditable")) 
            { 
                    range.setStartAfter(sel.anchorNode.parentNode); 
                    rangy.getSelection().setSingleRange(range); 
            } 
    } 
});

次の兄弟を選択して range.setStart(nextSibling, 0) を使用しても、IE は編集不可能な要素内に新しいテキストを追加します。IE が編集できない要素を編集しないようにするにはどうすればよいですか?

どんな助けでも大歓迎です。

4

1 に答える 1

1

問題は、IE がキャレットをその位置に配置することを単に許可せず、代わりに前の文字の最後にあるように「修正」することです。WebKit は実際に同じことを行います。例については、 http://jsfiddle.net/MZuFb/1/を参照してください。

私が考えることができる唯一の回避策は、一時文字を挿入して選択し、上書きされるようにすることです: http://jsfiddle.net/timdown/MZuFb/2/

于 2011-08-31T11:17:50.950 に答える