Placing caret outside of inserted tag in ContentEd

问题:

I am inserting a span tag into a contentEditable div using the document.execCommand insertHTML method.

After the insertion, i want the caret to be set at the end of the input, so that any further input is outside of the last inserted span tag. The default behavior, at least in Chrome is to place further input within the tag itself.

回答1:

Terrible hack that i have come up with is to insert another span element immediately afterword:

document.execCommand('insertHTML', false, '<span>&nbsp;</span>');

Now the new content goes into this span element instead. Hopefully there is a better solution.

回答2:

I was stuck on this as well until I tried this. Place a   at the end of your insert as in

document.execCommand('insertHTML', false, '<span>&nbsp;</span>&nbsp;');

Just putting a space at the end of your HTML will not work as I have found it is always trimmed.