How to do same as backspace when using execCommand() with editable iframe?

Question

I am using execCommand with javascript to insert text into editable iframes like this:

element.execCommand("insertHTML",false,"some text");

Anyone know how to insert that text instead of the first character to the left of the cursor? So the same effect as pressing a backspace before doing the above?

Answer 1

It seems that there's no easy way to send keystrokes to editable iframe, so you'll probably need to find some sort of workaround. Easiest way to do that would be to get the contents from iframe, manipulate them and then put them back to iframe.

E.g.: Select all text in iframe with

var selection = element.execCommand("selectAll");

to remove last character - slice selection

selection = selection.baseNode.data.slice(0, -1)

delete all content

element.execCommand("Delete")

append sliced selection + your new text

element.execCommand("insertHTML",false,selection);
element.execCommand("insertHTML",false,"some text");

---

References:

1. http://msdn.microsoft.com/en-us/library/ie/ms533049(v=vs.85).aspx
2. https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla

P.S. I'm note very familiar with editable iframe or selection objects, so if you have any html of special characters in your text it might be much more complicated than this. Also you might need to tweak it for different browsers.