Nested Contenteditable won't focus in Opera - 【StackMirror】|jquery|opera|contenteditable

I'm having an issue with a nested contenteditable div. In both Mozilla and Webkit it works properly. You can click within the nested div or within the parent and the cursor will appear as expected. The problem is with Opera. I can get the cursor in the parent div, but when I click within the nested div there is no cursor. Here is my example:

http://jsfiddle.net/Hawkee/gSd2p/1/

First click the link to add the nested div. You'll see that if you click "Code" above the nested div the cursor will appear, but any time you click within the div it disappears.

2012-04-04 02:56
by Hawkee

I've sort of seen this happen before. If you tab into the nested contentEditable, you can edit it then. I don't know how to fix that though - Jordan 2012-04-04 03:08

What I might need to do is detect the browser and do an ugly hack. It works when I turn off contenteditable in the parent div upon clicking the nested div. Then I need to turn it back on upon blur - Hawkee 2012-04-04 03:35

Hawkee did you get this solved? Even html5demo have this problem (focus works only first time).. - Janusz Skonieczny 2012-08-23 18:35

No, I could not solve this. I had to work around it by presenting an editable area that looks like a single box, but really they're separated out within it - Hawkee 2012-08-24 16:25

The workaround for return the focus to the div in Opera:

var range = document.createRange();
range.selectNodeContents(document.getElementById('yourdiv'));
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

2012-09-06 18:25
by Anatoli