获取光标插入符所在的所选contenteditable元素的子ID

Question

我目前正在尝试使用contenteditable div创建一个编辑器，但我遇到的问题是，在开始时单击 child-2 中的退格键会导致合并 child- 1 和 child-2 在一起，这违背了自己的目的。

我使用函数找到当前的插入位置：

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

哪个一直运行良好，但为了解决合并问题，我需要找出当前选择的元素，并使用插入符号位置的数据来使用event.preventDefault()并停止潜在的合并。

这是我正在使用和谈论的框架：

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

要查找所选元素，我试过这个：

console.log(document.activeElement);

查看是否打印出所选的 ID ，但这会将整个父元素输出到控制台而不仅仅是ID。

Answer 1

使用Event Delegation轻松找到点击的节点。还可以添加其他事件，如键和鼠标。

详情在演示

中发表

演示

＆＃13;

＆＃13;

// 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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将tabindex="0"应用于子元素，这会使它们具有焦点，这将在使用document.activeElement时选择子项（否则它始终是具有焦点的父项）：< / p>

＆＃13;

＆＃13;

console.log(document.activeElement);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

评论之后：我正在添加这个片段的截图：我点击了＆＃34; Two＆＃34;：你可以看到该行周围的虚线边框表示焦点状态：