Question

$(iframe).bind('keypress', function(e){
        if (e.which == 13) {
            var range = iframe.getSelection().getRangeAt(0);
            var nodeText = $(range.startContainer, iframe).parent().html();
            var leftPart = nodeText.substr(0, range.endOffset);
            var rightPart = nodeText.substr(range.endOffset);

            $(range.startContainer, iframe).parent().replaceWith('<big>'+leftPart+'</big><p>'+rightPart+'</p>');
            return false;
        }
});

我有iframe的内容，例如：

<p>someText</p>

当我将光标置于“some”和“text”之间，然后按回车键，我希望将其拆分为：

<big>some</big><p>Text</p>

一切似乎都运行正常，但我还需要将光标位置更改为此开头：Text 我知道如何设置光标位置，但我需要选择该元素。只有$('p', iframe)无效，因为我可以在iframe中添加多个项。任何想法？

Answer 1

这是DOM的混合组合，它考虑节点和偏移方面的所有内容，以及jQuery-ish HTML-as-strings。两者混合不好。您误解了DOM范围的endOffset和startOffset属性：它们不是容器innerHTML内的偏移量。我建议查看MDC或the spec并重构您的代码，仅使用DOM节点而不是HTML字符串。

Answer 2

丹尼斯，

为所有这些提供一个公共类名，以便它对元素产生影响。

Answer 3

我会使用jQuery添加动态id属性（或使用metadata插件）来识别拆分段落。并根据识别出的分割字符串将光标放在标记之前。完成放置光标后，请确保删除id属性（或某些元数据），以便同一上的任何其他分割或退格不会导致意外后果

希望有所帮助

Answer 4

我找到了一个很好的解决方案，但没有为元素添加id或类。我改变了这个：

$(range.startContainer, iframe).parent().replaceWith('<big>'+leftPart+'</big><p>'+rightPart+'</p>');

到此：

var leftObject = $('<big>'+leftPart+'</big>');
var rightObject = $('<p>'+rightPart+'</p>');
$(range.startContainer, iframe).parent().replaceWith(leftObject);
leftObject.after(rightObject);

现在我在leftObject和rightObject

中选择了两个元素

选择创建的元素

4 个答案: