Emphasizing the importance of nested contenteditable components

Question

Emphasizing the importance of nested contenteditable components

So, I have a situation with two contenteditable divs nested within another:

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

If you want to see an example, check out this Fiddle.

When the top div is focused, the 'nested' div should also be focused. However, when checking with

console.log(document.activeElement);

, it shows that the top div is focused and doesn't recognize the nested div.

In situations where content is being edited, it's crucial to identify the nested div element instead of the top element.

How can this be achieved? Any assistance would be greatly appreciated.

javascript jquery css contenteditable

Answer 1

Answer №1

The handling of [contenteditable] elements by browsers can cause nested [contenteditable] elements to not respond to events, as the editing host is the parent editable element. Refer to the spec:

If an element is editable but its parent is not, or if an element is editable without a parent, then that element becomes an editing host. Editable elements are allowed to be nested. User agents are required to make editing hosts focusable (usually meaning they can be tabbed to). An editing host may contain non-editable sections, which are handled differently. These non-editable sections may also contain further editing hosts.

To address this issue, a workaround involves temporarily making the focused nested editable element the hosting host by making any of its editable parents temporarily non-editable. Check out the example below:

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

-updated jsFiddle-

Answer 2

The handling of [contenteditable] elements by browsers can cause nested [contenteditable] elements to not respond to events, as the editing host is the parent editable element. Refer to the spec:

If an element is editable but its parent is not, or if an element is editable without a parent, then that element becomes an editing host. Editable elements are allowed to be nested. User agents are required to make editing hosts focusable (usually meaning they can be tabbed to). An editing host may contain non-editable sections, which are handled differently. These non-editable sections may also contain further editing hosts.

To address this issue, a workaround involves temporarily making the focused nested editable element the hosting host by making any of its editable parents temporarily non-editable. Check out the example below:

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

-updated jsFiddle-

Answer 3

Answer №2

Ensure the nested div has a tabindex=-1 for focusability:

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

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

Important Points:

The attribute contenteditable is inherited, eliminating the need for it to be redefined.
This feature functions solely with mouse focus; navigating the cursor over the nested div will not trigger focus. Additionally, leaving a focused nested div with the cursor does not return focus to the parent div. Strategies involving keydown event listeners, range, and selection may be required for proper handling.

Answer 4

Ensure the nested div has a tabindex=-1 for focusability:

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

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

Important Points:

The attribute contenteditable is inherited, eliminating the need for it to be redefined.
This feature functions solely with mouse focus; navigating the cursor over the nested div will not trigger focus. Additionally, leaving a focused nested div with the cursor does not return focus to the parent div. Strategies involving keydown event listeners, range, and selection may be required for proper handling.

Answer 5

Answer №3

When dealing with nested contentEditable elements, the focus should only be activated in the highest ancestor element. To determine the closest element where the caret is positioned, you can utilize selection as shown below:

function getClosestCEOfCaret(){
  const userSelection = window.getSelection()
  const textRange = userSelection.getRangeAt(0)
  const startPoint = textRange.startContainer;
  let nearestElement;
  if(startPoint.nodeType === 1) nearestElement = startPoint;
  else nearestElement = startPoint.parentElement; 
  return nearestElement.closest('[contenteditable="true"]')
}
console.log(getClosestCEOfCaret())

Answer 6

When dealing with nested contentEditable elements, the focus should only be activated in the highest ancestor element. To determine the closest element where the caret is positioned, you can utilize selection as shown below:

function getClosestCEOfCaret(){
  const userSelection = window.getSelection()
  const textRange = userSelection.getRangeAt(0)
  const startPoint = textRange.startContainer;
  let nearestElement;
  if(startPoint.nodeType === 1) nearestElement = startPoint;
  else nearestElement = startPoint.parentElement; 
  return nearestElement.closest('[contenteditable="true"]')
}
console.log(getClosestCEOfCaret())

Emphasizing the importance of nested contenteditable components

Answer №1

-updated jsFiddle-

Answer №2

Answer №3

Similar questions

Having trouble executing node commands in the terminal

Issues occurred as the button's on-click function fails to execute the

Increase the jQuery level and utilize the .find() method

Embedding an Inline Frame on Chrome while preserving Internet Explorer preferences

PHP variables are unable to fetch HTML option values in real time

What is the process of combining two identical objects in Angular JS?

React forms are experiencing issues with characters overlapping

Sort JSON data based on keys (not values)

Reloading nested Iframe with Selenium automation script

What is preventing me from including onclick functions within a loop?

Is there a way to restart a setTimeout loop upon receiving a response from an API server?

Retrieve data from Last.fm API by utilizing both Node.js and Angular framework

Navigating in a react login interface

The code appears to function properly in Internet Explorer, yet encounters compatibility issues with other

Maintaining the selected radio button based on previous input with the use of jQuery or PHP

Guide to removing a colon from my JSON.stringify output

Express Promises Linked Together: Lack of Data in Last Stage

Utilizing React, manipulating the DOM by utilizing getElementById, and then attempting to swap out a node with a React Component

What is the process of specifying that an Angular directive must act as a child directive within a particular directive in Angular?

Formatting Issue with HTML Form (Width Exceeding Specifications)