Tukukkk

Our target browser is IE8 as the application is a legacy one and has got some com dependency.We are showing content inside a content-editable div. One of the requirements is to be able to replace texts inside the div when the browser is in "overwrite" mode. Paste is working fine but the input cursor is always moving to the end after the paste. We are using rangy-core, version: 1.3.1 for range/selection related logic. Unable to figure out what is going wrong here. Need help.

The following code is called when the document is loaded:

    $("#info").on("paste", function (e) {

    var clipboardData = window.clipboardData.getData("Text");

    clipboardData = clipboardData.replace(/(^ *)|(rn|n|r)/gm, "");

    if (isOverwriteEnabled()) {

        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        pasteCopiedData(clipboardData);

    }

});

Related code snippets for reference:

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);    

}

Please let me know if more information is required.