CODEWITHSUNDEEP
javascripthtmlcontenteditable
user997712
user997712

Reputation: 261

Placing caret outside of inserted tag in ContentEditable

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.

Upvotes: 4

Views: 1662

Answers (2)

user643862
user643862

Reputation: 95

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.

Upvotes: 3

user997712
user997712

Reputation: 261

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.

Upvotes: 2

Related Questions