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

admin管理员组

文章数量:1201569

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?

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?

• javascript
• css
• tinymce
• contenteditable
• internet-explorer-10

Share Improve this question Follow asked Apr 4, 2013 at 0:09 alexalex 490k204204 gold badges889889 silver badges991991 bronze badges 9

• if you don't want to edit, you can set focus on some input elsewhere on the page. – el Dude Commented Apr 4, 2013 at 1:13
• @EL I was hoping to allow the users to continue to edit. Maybe I can just disable it for IE10. – alex Commented Apr 4, 2013 at 2:17
• @alex For the record, this will happen with a regular input as well; the contenteditable attribute isn't needed. That being said, I saw this months ago and never found a solution either. – Sampson Commented Apr 8, 2013 at 2:21
• 2 This happens in IE way back (probably back to 5.5), not just IE 10. It's arguable whether it's even a bug. – Tim Down Commented Apr 8, 2013 at 16:44
• 1 Lol... this is incredible. I just installed IE10 on Win7, trying to open your fiddle and it crashed. Completely. "Internet Explorer has stopped working". Then I was thinking, I know the Mercury editor, which has a history tab lying over the contenteditable field. So I said to myself: "Let's see how they did it!". Answer: They did not. "Sorry, but Mercury Editor isn't supported by your current browser." Seriously: After leaving out 3 IE Versions working on chrome MS couldn't possibly disappoint me more... – Hannes M Commented Apr 12, 2013 at 5:58

 |  Show 4 more comments

4 Answers 4

Sorted by: Reset to default 6 +500

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

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.

You can simulate a caret with JavaScript and CSS and customize it.
With proper customization you can build a practical workaround to this bug.

Here is an interesting article on how to do this:
http://www.dynamicdrive.com/forums/showthread.php?17450-Emulating-a-terminal-like-caret-with-javascript-and-css

Here is a demo:
http://shachi.prophp.org/demo.html

Also, there is a jQuery Terminal Emulator plugin that you can fork and customize to your specific needs:
http://terminal.jcubic.pl/#demo

Well the obvious workaround is to decrease the height of the contenteditable div and show the toolbar above the editable area instead of on top of it.

本文标签：