在覆盖模式下从剪贴板粘贴-输入光标移至文本节点的末尾

时间:2018-11-23 20:06:31

标签: javascript internet-explorer-8 copy-paste contenteditable rangy

我们的目标浏览器是IE8,因为该应用是旧版浏览器,并且具有com依赖性。我们正在将内容显示在内容可编辑的div中。要求之一是当浏览器处于“覆盖”模式时能够替换div中的文本。粘贴工作正常,但输入光标始终在粘贴之后移至末尾。我们正在使用rangy-core,版本:1.3.1进行范围/选择相关的逻辑。无法找出问题所在。需要帮助。

enter image description here

在加载文档时将调用以下代码:

    $("#info").on("paste", function (e) {
    var clipboardData = window.clipboardData.getData("Text");
    clipboardData = clipboardData.replace(/(^ *)|(\r\n|\n|\r)/gm, "");
    if (isOverwriteEnabled()) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        pasteCopiedData(clipboardData);
    }
});

相关代码段供参考:

function isOverwriteEnabled() {
try {
    // try the MSIE way
    return document.queryCommandValue("OverWrite");
} catch (ex) {
    // not MSIE => not supported
    return false;
}
}

function pasteCopiedData(clipboardData) {
var json = getCurrentNodeWithOffset();
handleTextOverwrite(json, clipboardData);
}

function getCurrentNodeWithOffset() {
var json = {};
var selectedObj = rangy.getSelection();
var range = selectedObj.getRangeAt(0);
json.node = selectedObj.anchorNode.nodeType === 3 ? selectedObj.anchorNode : findImmediateTextNode(selectedObj.anchorNode, range.startOffset);
json.offset = selectedObj.anchorNode.nodeType === 3 ? range.startOffset : json.node.nodeValue.length - 1;
return json;
}

function handleTextOverwrite(json, textToReplace) {

var lenToCopy = textToReplace.length;
var offsetPos = json.offset;
var jsonNode = json.node;

try {
    while (lenToCopy > 0) {
        var toCopy = jsonNode.nodeValue.length - offsetPos;
        var startPos = textToReplace.length - lenToCopy;

        if (lenToCopy <= toCopy) {
            json.node.nodeValue = jsonNode.nodeValue.substr(0, offsetPos) + textToReplace.substr(startPos) + jsonNode.nodeValue.substr(offsetPos + lenToCopy);
            lenToCopy = 0;
        }
        else {
            var copiedPos = startPos + toCopy;
            jsonNode.nodeValue = jsonNode.nodeValue.substr(0, offsetPos) + textToReplace.substr(startPos, toCopy);

            lenToCopy -= copiedPos;
            var nextJsonNode = findNextTextNode(jsonNode);

            if (!nextJsonNode) {
                //do the remaining paste in jsonNode
                jsonNode.nodeValue = jsonNode.nodeValue + textToReplace.substr(copiedPos);
                lenToCopy = 0;
            }
            else {
                jsonNode = nextJsonNode;
            }
        }

        offsetPos = 0;
    }

    setCaret(json.node, json.offset);
}
catch (ex) {

}
}

function setCaret(node, pos) {
var el = document.getElementById("info");
var rangyRange = rangy.createRange(el);
var sel = rangy.getSelection();
rangyRange.setStart(node, pos + 1);
rangyRange.setEnd(node, pos + 1);
rangyRange.collapse(true);
sel.removeAllRanges();
sel.addRange(rangyRange);    
}

如果需要更多信息,请告诉我。

0 个答案:

没有答案