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.
javascript internet-explorer-11
add a comment |
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.
javascript internet-explorer-11
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
add a comment |
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.
javascript internet-explorer-11
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
javascript internet-explorer-11
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
add a comment |
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
add a comment |
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
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
add a comment |
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);
add a comment |
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
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
add a comment |
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
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
add a comment |
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
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
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
add a comment |
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
add a comment |
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);
add a comment |
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);
add a comment |
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);
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);
edited Nov 14 at 12:31
answered Nov 13 at 9:55
ashwin1014
10818
10818
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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