Focusing on nested contenteditable element

Question

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.

There is interesting effect if you try it in IE. First you focus on top div and you can change it's size and if you press key it responds with false. But if you click more you get focus on inner div which responds with true. — Gray Fox, Dec 01 '16 at 09:54
That is interesting. Feels more like a hack but I would definitely look into it :) — Steve Kim, Dec 01 '16 at 09:55
why do you need contenteditable on top? you only need "contenteditable" on ".nested" — Marouen Mhiri, Dec 01 '16 at 09:58
@MarouenMhiri I am designing it this way to have a better control of the input. I tried to use it simpler way but for what I am trying to do, it didn't work. — Steve Kim, Dec 01 '16 at 10:00

A. Wolff · Accepted Answer · 2016-12-01T09:58:39.417

1

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-

edited Dec 01 '16 at 09:58

answered Dec 01 '16 at 09:56

A. Wolff

74,033
9
94
155

You might as well check out Jquery's [.closest()](https://api.jquery.com/closest/) method for traversing through multiple elements – Technologeek Dec 01 '16 at 10:05
1

@Technologeek Not here because `closest('[contenteditable]')` would return element itself (because it is itself editable element) and btw you could get more than one parent editable and `closest()` would return only first one. So here, it isn't a solution to use `closest()`. – A. Wolff Dec 01 '16 at 10:08
fiddle does not exists. – Friedrich -- Слава Україні Oct 03 '21 at 07:03

score 0 · Answer 2 · answered Oct 03 '21 at 07:24

Give tabindex=-1 to the nested div, than can be focused:

.nested {
  display: inline;
  background-color: #eef;
}

<div class="top" contenteditable="true">
    Editable div <div class="nested" tabindex=-1>Nested div</div>
</div>

Notes:

contenteditable is inherited, so there is no need to specify it again.
it only works with mouse focus. Moving the caret (cursor left/right) over the nested div, will not focus the nested div. Similarily, leaving a focused nested div with the caret, will not does not give the focus back to the parent div. Handling might need work arounds with keydown listener, range and selection.

score 0 · Answer 3 · answered Jun 26 '22 at 14:18

For nested contentEditable elements, focus shall be only triggered in the top ancestor. You could use selection to get the closest element where the caret is right in:

function getCEOfCaret(){
  const selection = window.getSelection()
  const range = selection.getRangeAt(0)
  const start = range.startContainer;
  let startElement;
  if(start.nodeType === 1) startElement = start;
  else startElement = start.parentElement; 
  return startElement.closest('[contenteditable="true"]')
}
console.log(getCEOfCaret())

Focusing on nested contenteditable element

3 Answers3

-updated jsFiddle-

Linked