0

私は素晴らしいRangyライブラリを使用しています。また、HTML ノードを contenteditable DIV に挿入するために、Tim Down の関数も使用しています。

function insertNodeAtCaret(node) {
    var sel = rangy.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode(node);
        range.collapseAfter(node);
        sel.setSingleRange(range);
    }
}

これで、Chrome で正常に動作し、期待どおりに動作するようになりました。ただし、FF と Opera では動作が異なります。Chrome では、HTML ノードは contenteditable に挿入され、キャレットはこの HTML ノードにとどまるため、ユーザーが入力を続けると、入力はすべて挿入された HTML ノード内に行われます。

Opera と Firefox では、キャレットは挿入された HTML ノードの外側に配置され、ユーザーが入力を続けると、入力された文字は HTML ノード内にはありません。

私のコードは、「Chrome の方法」で動作することを期待しています。FF と Opera で同じ動作を実現するのを手伝ってもらえますか?

テスト用の動作中の jsFiddle は次のとおりです: http://jsfiddle.net/Er5DH/2/ (contenteditable で「x」キーを押すと、赤色の SPAN 要素が挿入されます。Chrome では、入力を続けると、文字は赤色になります。ただし、FF と Opera では、「x」キーを押した後に次に入力する文字は黒くなります - 望ましくありません)

助けとヒントをありがとう。

4

1 に答える 1

1

あなたはに変更range.collapseAfter(node)することができます

range.selectNodeContents(node);
range.collapse(false);

http://jsfiddle.net/Er5DH/6/を参照

于 2012-05-26T09:02:33.020 に答える