0

我正在使用很棒的Rangy 库。而且我还使用 Tim Down 的函数将 HTML 节点插入到 contenteditable DIV 中：

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 回答