Unable to delete or insert Text in IE11 div contentEditable using execCommand











up vote
0
down vote

favorite












document.execCommand("delete");
document.execCommand("insertText", false, insertString);


The above two commands work perfectly fine in Chrome/Firefox but i'm unable to use it in IE11.



document.execCommand("delete") only works in IE if we select a range of text. How do i get it to work like it in Chrome(i.e like using backspace).



And also anyway how I could use document.execCommand("insertText", false, insertString) in IE.










share|improve this question
























  • Possible duplicate of internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user
    – connexo
    Nov 11 at 9:13










  • it's not a duplicate, i did visit that link. there is no info on "document.execCommand("delete")"
    – ashwin1014
    Nov 12 at 11:02















up vote
0
down vote

favorite












document.execCommand("delete");
document.execCommand("insertText", false, insertString);


The above two commands work perfectly fine in Chrome/Firefox but i'm unable to use it in IE11.



document.execCommand("delete") only works in IE if we select a range of text. How do i get it to work like it in Chrome(i.e like using backspace).



And also anyway how I could use document.execCommand("insertText", false, insertString) in IE.










share|improve this question
























  • Possible duplicate of internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user
    – connexo
    Nov 11 at 9:13










  • it's not a duplicate, i did visit that link. there is no info on "document.execCommand("delete")"
    – ashwin1014
    Nov 12 at 11:02













up vote
0
down vote

favorite









up vote
0
down vote

favorite











document.execCommand("delete");
document.execCommand("insertText", false, insertString);


The above two commands work perfectly fine in Chrome/Firefox but i'm unable to use it in IE11.



document.execCommand("delete") only works in IE if we select a range of text. How do i get it to work like it in Chrome(i.e like using backspace).



And also anyway how I could use document.execCommand("insertText", false, insertString) in IE.










share|improve this question















document.execCommand("delete");
document.execCommand("insertText", false, insertString);


The above two commands work perfectly fine in Chrome/Firefox but i'm unable to use it in IE11.



document.execCommand("delete") only works in IE if we select a range of text. How do i get it to work like it in Chrome(i.e like using backspace).



And also anyway how I could use document.execCommand("insertText", false, insertString) in IE.







javascript internet-explorer-11






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 8:34









Tân Nguyễn

1




1










asked Nov 11 at 8:32









ashwin1014

10818




10818












  • Possible duplicate of internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user
    – connexo
    Nov 11 at 9:13










  • it's not a duplicate, i did visit that link. there is no info on "document.execCommand("delete")"
    – ashwin1014
    Nov 12 at 11:02


















  • Possible duplicate of internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user
    – connexo
    Nov 11 at 9:13










  • it's not a duplicate, i did visit that link. there is no info on "document.execCommand("delete")"
    – ashwin1014
    Nov 12 at 11:02
















Possible duplicate of internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user
– connexo
Nov 11 at 9:13




Possible duplicate of internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user
– connexo
Nov 11 at 9:13












it's not a duplicate, i did visit that link. there is no info on "document.execCommand("delete")"
– ashwin1014
Nov 12 at 11:02




it's not a duplicate, i did visit that link. there is no info on "document.execCommand("delete")"
– ashwin1014
Nov 12 at 11:02












2 Answers
2






active

oldest

votes

















up vote
0
down vote













I've seen that you've found the workround about insertText.



And below is my advice to delete in IE.



You could see from the official document that the definition of Delete is:



delete:Deletes the current selection.



Maybe there is small performance difference between IE11 and Google Chrome like the backspace effect.



In my opinion, if you want to make the delete function work like using backspace in IE11, you could create another function to achieve this.



HTML.



<div id="testdiv" contenteditable="true">
Select something here and after click on delete.
</div>
<input type="button" value="Delete" onclick="backSpace();" />


JS.



function backSpace() {
p = document.getElementById("testdiv");
c = getCaretPosition(p);
console.log(getCaretPosition(p));
str = $("#testdiv").html();
if (c > 0 && c <= str.length) {
$("#testdiv").focus().html(str.substring(0, c - 1) + str.substring(c, str.length));

p.focus();
var textNode = p.firstChild;
var caret = c - 1;
var range = document.createRange();
range.setStart(textNode, caret);
range.setEnd(textNode, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}

$.fn.setCursorPosition = function (pos) {
this.each(function (index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};

function getCaretPosition(editableDiv) {
var caretPos = 0,
sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == editableDiv) {
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
}
}
return caretPos;
}


Above code from the thread:Simulate backspace button JS



I've tried the code and you could see the effect from the capture:result






share|improve this answer





















  • i did go through this before, it works as long as there is no carriage return. If i press the enter key 2-3 times, this function does not work(carret position is not incremented on new line). Works only if there is continuous typing.
    – ashwin1014
    Nov 14 at 12:29


















up vote
0
down vote













for insertText in IE, there is workaround:



 let isIE = function() {
return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
}

let text = "Hello"
if(isIE()) document.execCommand("paste", false, text);





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247049%2funable-to-delete-or-insert-text-in-ie11-div-contenteditable-using-execcommand%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    I've seen that you've found the workround about insertText.



    And below is my advice to delete in IE.



    You could see from the official document that the definition of Delete is:



    delete:Deletes the current selection.



    Maybe there is small performance difference between IE11 and Google Chrome like the backspace effect.



    In my opinion, if you want to make the delete function work like using backspace in IE11, you could create another function to achieve this.



    HTML.



    <div id="testdiv" contenteditable="true">
    Select something here and after click on delete.
    </div>
    <input type="button" value="Delete" onclick="backSpace();" />


    JS.



    function backSpace() {
    p = document.getElementById("testdiv");
    c = getCaretPosition(p);
    console.log(getCaretPosition(p));
    str = $("#testdiv").html();
    if (c > 0 && c <= str.length) {
    $("#testdiv").focus().html(str.substring(0, c - 1) + str.substring(c, str.length));

    p.focus();
    var textNode = p.firstChild;
    var caret = c - 1;
    var range = document.createRange();
    range.setStart(textNode, caret);
    range.setEnd(textNode, caret);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    }
    }

    $.fn.setCursorPosition = function (pos) {
    this.each(function (index, elem) {
    if (elem.setSelectionRange) {
    elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
    }
    });
    return this;
    };

    function getCaretPosition(editableDiv) {
    var caretPos = 0,
    sel, range;
    if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
    range = sel.getRangeAt(0);
    if (range.commonAncestorContainer.parentNode == editableDiv) {
    caretPos = range.endOffset;
    }
    }
    } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
    var tempEl = document.createElement("span");
    editableDiv.insertBefore(tempEl, editableDiv.firstChild);
    var tempRange = range.duplicate();
    tempRange.moveToElementText(tempEl);
    tempRange.setEndPoint("EndToEnd", range);
    caretPos = tempRange.text.length;
    }
    }
    return caretPos;
    }


    Above code from the thread:Simulate backspace button JS



    I've tried the code and you could see the effect from the capture:result






    share|improve this answer





















    • i did go through this before, it works as long as there is no carriage return. If i press the enter key 2-3 times, this function does not work(carret position is not incremented on new line). Works only if there is continuous typing.
      – ashwin1014
      Nov 14 at 12:29















    up vote
    0
    down vote













    I've seen that you've found the workround about insertText.



    And below is my advice to delete in IE.



    You could see from the official document that the definition of Delete is:



    delete:Deletes the current selection.



    Maybe there is small performance difference between IE11 and Google Chrome like the backspace effect.



    In my opinion, if you want to make the delete function work like using backspace in IE11, you could create another function to achieve this.



    HTML.



    <div id="testdiv" contenteditable="true">
    Select something here and after click on delete.
    </div>
    <input type="button" value="Delete" onclick="backSpace();" />


    JS.



    function backSpace() {
    p = document.getElementById("testdiv");
    c = getCaretPosition(p);
    console.log(getCaretPosition(p));
    str = $("#testdiv").html();
    if (c > 0 && c <= str.length) {
    $("#testdiv").focus().html(str.substring(0, c - 1) + str.substring(c, str.length));

    p.focus();
    var textNode = p.firstChild;
    var caret = c - 1;
    var range = document.createRange();
    range.setStart(textNode, caret);
    range.setEnd(textNode, caret);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    }
    }

    $.fn.setCursorPosition = function (pos) {
    this.each(function (index, elem) {
    if (elem.setSelectionRange) {
    elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
    }
    });
    return this;
    };

    function getCaretPosition(editableDiv) {
    var caretPos = 0,
    sel, range;
    if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
    range = sel.getRangeAt(0);
    if (range.commonAncestorContainer.parentNode == editableDiv) {
    caretPos = range.endOffset;
    }
    }
    } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
    var tempEl = document.createElement("span");
    editableDiv.insertBefore(tempEl, editableDiv.firstChild);
    var tempRange = range.duplicate();
    tempRange.moveToElementText(tempEl);
    tempRange.setEndPoint("EndToEnd", range);
    caretPos = tempRange.text.length;
    }
    }
    return caretPos;
    }


    Above code from the thread:Simulate backspace button JS



    I've tried the code and you could see the effect from the capture:result






    share|improve this answer





















    • i did go through this before, it works as long as there is no carriage return. If i press the enter key 2-3 times, this function does not work(carret position is not incremented on new line). Works only if there is continuous typing.
      – ashwin1014
      Nov 14 at 12:29













    up vote
    0
    down vote










    up vote
    0
    down vote









    I've seen that you've found the workround about insertText.



    And below is my advice to delete in IE.



    You could see from the official document that the definition of Delete is:



    delete:Deletes the current selection.



    Maybe there is small performance difference between IE11 and Google Chrome like the backspace effect.



    In my opinion, if you want to make the delete function work like using backspace in IE11, you could create another function to achieve this.



    HTML.



    <div id="testdiv" contenteditable="true">
    Select something here and after click on delete.
    </div>
    <input type="button" value="Delete" onclick="backSpace();" />


    JS.



    function backSpace() {
    p = document.getElementById("testdiv");
    c = getCaretPosition(p);
    console.log(getCaretPosition(p));
    str = $("#testdiv").html();
    if (c > 0 && c <= str.length) {
    $("#testdiv").focus().html(str.substring(0, c - 1) + str.substring(c, str.length));

    p.focus();
    var textNode = p.firstChild;
    var caret = c - 1;
    var range = document.createRange();
    range.setStart(textNode, caret);
    range.setEnd(textNode, caret);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    }
    }

    $.fn.setCursorPosition = function (pos) {
    this.each(function (index, elem) {
    if (elem.setSelectionRange) {
    elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
    }
    });
    return this;
    };

    function getCaretPosition(editableDiv) {
    var caretPos = 0,
    sel, range;
    if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
    range = sel.getRangeAt(0);
    if (range.commonAncestorContainer.parentNode == editableDiv) {
    caretPos = range.endOffset;
    }
    }
    } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
    var tempEl = document.createElement("span");
    editableDiv.insertBefore(tempEl, editableDiv.firstChild);
    var tempRange = range.duplicate();
    tempRange.moveToElementText(tempEl);
    tempRange.setEndPoint("EndToEnd", range);
    caretPos = tempRange.text.length;
    }
    }
    return caretPos;
    }


    Above code from the thread:Simulate backspace button JS



    I've tried the code and you could see the effect from the capture:result






    share|improve this answer












    I've seen that you've found the workround about insertText.



    And below is my advice to delete in IE.



    You could see from the official document that the definition of Delete is:



    delete:Deletes the current selection.



    Maybe there is small performance difference between IE11 and Google Chrome like the backspace effect.



    In my opinion, if you want to make the delete function work like using backspace in IE11, you could create another function to achieve this.



    HTML.



    <div id="testdiv" contenteditable="true">
    Select something here and after click on delete.
    </div>
    <input type="button" value="Delete" onclick="backSpace();" />


    JS.



    function backSpace() {
    p = document.getElementById("testdiv");
    c = getCaretPosition(p);
    console.log(getCaretPosition(p));
    str = $("#testdiv").html();
    if (c > 0 && c <= str.length) {
    $("#testdiv").focus().html(str.substring(0, c - 1) + str.substring(c, str.length));

    p.focus();
    var textNode = p.firstChild;
    var caret = c - 1;
    var range = document.createRange();
    range.setStart(textNode, caret);
    range.setEnd(textNode, caret);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    }
    }

    $.fn.setCursorPosition = function (pos) {
    this.each(function (index, elem) {
    if (elem.setSelectionRange) {
    elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
    }
    });
    return this;
    };

    function getCaretPosition(editableDiv) {
    var caretPos = 0,
    sel, range;
    if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
    range = sel.getRangeAt(0);
    if (range.commonAncestorContainer.parentNode == editableDiv) {
    caretPos = range.endOffset;
    }
    }
    } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
    var tempEl = document.createElement("span");
    editableDiv.insertBefore(tempEl, editableDiv.firstChild);
    var tempRange = range.duplicate();
    tempRange.moveToElementText(tempEl);
    tempRange.setEndPoint("EndToEnd", range);
    caretPos = tempRange.text.length;
    }
    }
    return caretPos;
    }


    Above code from the thread:Simulate backspace button JS



    I've tried the code and you could see the effect from the capture:result







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 14 at 9:09









    Jenifer Jiang

    161




    161












    • i did go through this before, it works as long as there is no carriage return. If i press the enter key 2-3 times, this function does not work(carret position is not incremented on new line). Works only if there is continuous typing.
      – ashwin1014
      Nov 14 at 12:29


















    • i did go through this before, it works as long as there is no carriage return. If i press the enter key 2-3 times, this function does not work(carret position is not incremented on new line). Works only if there is continuous typing.
      – ashwin1014
      Nov 14 at 12:29
















    i did go through this before, it works as long as there is no carriage return. If i press the enter key 2-3 times, this function does not work(carret position is not incremented on new line). Works only if there is continuous typing.
    – ashwin1014
    Nov 14 at 12:29




    i did go through this before, it works as long as there is no carriage return. If i press the enter key 2-3 times, this function does not work(carret position is not incremented on new line). Works only if there is continuous typing.
    – ashwin1014
    Nov 14 at 12:29












    up vote
    0
    down vote













    for insertText in IE, there is workaround:



     let isIE = function() {
    return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
    }

    let text = "Hello"
    if(isIE()) document.execCommand("paste", false, text);





    share|improve this answer



























      up vote
      0
      down vote













      for insertText in IE, there is workaround:



       let isIE = function() {
      return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
      }

      let text = "Hello"
      if(isIE()) document.execCommand("paste", false, text);





      share|improve this answer

























        up vote
        0
        down vote










        up vote
        0
        down vote









        for insertText in IE, there is workaround:



         let isIE = function() {
        return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
        }

        let text = "Hello"
        if(isIE()) document.execCommand("paste", false, text);





        share|improve this answer














        for insertText in IE, there is workaround:



         let isIE = function() {
        return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
        }

        let text = "Hello"
        if(isIE()) document.execCommand("paste", false, text);






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 14 at 12:31

























        answered Nov 13 at 9:55









        ashwin1014

        10818




        10818






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247049%2funable-to-delete-or-insert-text-in-ie11-div-contenteditable-using-execcommand%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Bressuire

            Vorschmack

            Quarantine