steve Kim steve Kim - 2 days ago 5
CSS Question

Focusing on nested contenteditable element

So, I have two contenteditable divs nested inside of another:

<div class="top" contenteditable="true">
<div class="nested" contenteditable="true">This</div>
</div>


Here is Fiddle.

When it is focused,
nested
should be focused but using
console.log(document.activeElement);
it shows that the
top
is focused and it doesn't recognize the
nested
div.

In a case where content is being edited, I need to recognize
nested
div element instead of the
top
element.

How would I achieve this? Any help will be much appreciated.

Answer

The way [contenteditable] elements are handled by browser made any nested [contenteditable] not handling any event, the editing host is the former editable parent. See spec:

If an element is editable and its parent element is not, or if an element is editable and it has no parent element, then the element is an editing host. Editable elements can be nested. User agents must make editing hosts focusable (which typically means they enter the tab order). An editing host can contain non-editable sections, these are handled as described below. An editing host can contain non-editable sections that contain further editing hosts.

Now as a workaround, you could make focused nested editable element the hosting host by setting any of its editable parent temporaly not editable. See e.g:

$('div.top [contenteditable]').on('focusin focusout', function(e) {
    $(this).parents('[contenteditable]').prop('contenteditable', e.type === "focusout");
});

-updated jsFiddle-

Comments