Is there a way to stop a contenteditable's caret from appearing over elements in IE10?

Question

There seems to be a bug in IE10, where if I place an element over another element with the contenteditable attribute, the editor's caret is drawn over everything.

You can see this behaviour below in the image below and in this jsFiddle.

I've mucked around with plenty of CSS properties, and been unable to find a solution to this. It works as expected in other browsers.

The reason I need this is because I am designing a WYSWIYG editor (TinyMCE fork) experience where the toolbars slide down over the text when they're required. This bug makes the caret appear over the top of the toolbar.

The only solution I have thought of is to blur the editor's focus, and refocus it when the toolbar has disappeared. However, this will stop users from typing when the toolbar is activated, and would also cause inconsistent behaviour across browsers.

Is there a workaround to this bug?

Answer 1

There is no way to overlap the caret with another element in IE. This question was asked many times:

• Link 1
• Link 2

...

But you can blur the textarea after getting the caret position (see: Caret position in textarea, in characters from the start) and then show your toolbar. After hiding the toolbar, you can focus the textarea again, setting the caret position with:

function setCaretPosition(elemId, caretPos) {     var elem = document.getElementById(elemId);      if(elem != null) {         if(elem.createTextRange) {             var range = elem.createTextRange();             range.move('character', caretPos);             range.select();         }         else {             if(elem.selectionStart) {                 elem.focus();                 elem.setSelectionRange(caretPos, caretPos);             }             else                 elem.focus();         }     } } 

See: Set keyboard caret position in html textbox

Answer 2

Add -ms-user-select: none to the contenteditable element. Setting focus will then not show the cursor - guessing a browser quirk. Cursor will probably reappear once you hit left/right or type another char though.