获取 cursor 插入符号所在的选定 contenteditable 元素的子元素的 ID

Question

I'm currently trying to make an editor using contenteditable divs, but I'm having an issue where clicking backspace in say child-2 at the start will result in merging child-1 and child-2 together, which defeats its own purpose.

I'm finding the current caret position using the function:

caret: function() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) return sel.getRangeAt(0).startOffset;
    }
    return null;
}

Which has been working perfectly, but to fix the merging issue I need to find out which element is currently selected and use that data with the caret location to use event.preventDefault() and stop a potential merge.

This is frame that I'm using and talking about:

<div id="parent" contenteditable="true">
  <div id="child-1">
    One
  </div>
  <div id="child-2">
    Two
  </div>
  <div id="child-3">
    Three
  </div>
</div>

To find the selected element I've tried this:

console.log(document.activeElement);

To see if this prints out the ID of the child selected, though this outputs the entire parent element into the console instead of just the ID.

Answer 1

Use Event Delegation to easily find the clicked node. Other events such as key and mouse can be added as well.

Details are commented in demo

Demo

 // Refernce the parent of all of the target nodes var parent = document.getElementById('parent'); // Register the click event to #parent parent.addEventListener('click', idNode); // This is the callback that is invoked on each click function idNode(e) { /* If the node clicked (e.target) is not the || the registered event listener || (e.currentTarget = #parent) */ if (e.target !== e.currentTarget) { // Get the #id of clicked node var ID = e.target.id; // Reference e.target by its #id var child = document.getElementById(ID); } // Log the #id of each e.target at every click console.log('The caret is located at ' + ID); // Return the e.target as a DOM node when needed return child; } 

 <div id="parent" contenteditable="true"> <div id="child-1"> One </div> <div id="child-2"> Two </div> <div id="child-3"> Three </div> </div> 

Answer 2

You can apply tabindex="0" to the child elements, which makes them focusable, which will select the children when using document.activeElement (otherwise it's always the parent which has the focus):

 console.log(document.activeElement); 

 <div id="parent" contenteditable="true"> <div id="child-1" tabindex="0"> One </div> <div id="child-2" tabindex="0"> Two </div> <div id="child-3" tabindex="0"> Three </div> </div> 

After comment: I am adding a screenshot of this very snippet: I clicked into the word "Two": You can see the dotted border around that line indicating the focus status:

Answer 3

By using document.getSelection().getRangeAt(0).commonAncestorContainer.parentNode.parentNode.parentNode.id you can get the id of the parent element of the caret.

Example

 function getParentId() { var caret = document.getSelection().getRangeAt(0); var caretParent = caret.commonAncestorContainer.parentNode; console.log(caretParent.id); }

 <div id="parent" contenteditable="true"> <div id="child-1" tabindex="0"> One </div> <div id="child-2" tabindex="0"> Two </div> <div id="child-3" tabindex="0"> Three </div> </div> <button onclick="getParentId()">Get Id</button>