Question

我有以下函数在调用文档末尾时使用文本字段中的文本值在文档末尾创建一个新文本节点：

   function addAfter () {
      var elem = document.getElementById('textfield').value;
      var h = document.createElement('span');
      var t = document.createTextNode(elem);    
      h.appendChild(t);
      document.body.appendChild(h);
   }

我希望它能够在用户选择的文本之后立即添加文本（例如，当您单击并拖动以选择文本时）。需要替换document.body.appendChild(h);才能使其正常工作？

Answer 1

Try This JS Fiddle

除了IE边缘之外，我应该做任何事情（我相信）

    function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

document.body.addEventListener('mouseup', function() {
(window.getSelection()) ? addText(window.getSelection().toString(), window.getSelection().baseNode.parentNode) : addText(document.selection.toString(), document.selection.baseNode.parentNode);
});

function addText(text, parent) {
parent.appendChild(document.createTextNode(text));
}

它的工作方式是使用mouseUp事件来确定是否已选择文本。选定的文本存储在window.getSelected（）或document.selected（）下面 - 然后它将该值以及所选文本的父项传递给addText函数。它使用文档appendChild和createTextNode方法将捕获的文本附加到DOM。

在IE的早期版本中，他们使用了document.select（），但是在Edge中，他们切换到了getSelection（和其他人一样）但是他们没有实现与获取文本时返回的相同值，因此你不能真的抓住parentNode并轻松附加到该节点。

因此，简而言之，这将为您提供所需的内容，但它不是跨浏览器，似乎没有办法轻松实现。

Answer 2

我操纵了我在另一个Feed上找到的解决方案。

  function addAfter (isBefore) {
var sel, range, node;
var changeText = document.getElementById('textfield').value;
var textAndCode = "<span class=\"correction\"> " + changeText + " </span>";
if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = window.getSelection().getRangeAt(0);
        range.collapse(isBefore);

        // Range.createContextualFragment() would be useful here but was
        // until recently non-standard and not supported in all browsers
        // (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = textAndCode;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);
    }
} else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    range.collapse(isBefore);
    range.pasteHTML(textAndCode);
}
}

如果您希望它出现在isBefore之后，您只需要传递{{1}}的值。

用户选择后添加带文本节点的元素

2 个答案: