Javascript - 在[contenteditable]的子元素中获取插入符号后面的元素

Question

我正在使用Javascript构建一个简单易用的文本编辑器，基本上是一个WYSIWYG编辑器。 我将使用contenteditable属性到主包装器（ .wrapper ）。 当您在.wrapper按Enter .wrapper ，具有唯一id的新<p>元素将附加到包装器。

我需要一种方法来获取当前被选中的.wrapper哪个子元素（即，被聚焦或在其中具有插入/文本标记）。

我搜索了几天没有任何结果，我尝试使用document.elementFromPoint()但没有任何正确的结果。

当使用$(":focus") ，我得到整个.wrapper而不是特定的子元素。

编辑：

示例HTML结构：

<div class="container t-wrapper" contenteditable>
</div>

示例Javascript代码：

$(document).ready(function() {
    $currentElement = $("[contenteditable]");

    $(".t-wrapper").each(function() {
        var id = generateIdentifier(6); // Ignore this

        /* This creates the initial <p> child element, where you start typing. */
        $(this).html('<p class="t-empty t-first" id="' + id + '"></p>');

        $(this).on("mouseup", function() {
            /* $currentElement = whatever element the caret is inside. */
        });

        $(this).on("keyup", function() {
            /* $currentElement = whatever element the caret is inside. */
        });
    ));
});

编辑2：

我设法让它完全适用于mouseup事件，因为你实际上是在点击某些东西。 但是在使用键盘移动插入符号时我需要这个。 或者，我需要一些方法来获取插入符号的位置（以像素为单位），然后使用document.elementFromPoint()来获取特定元素。

Answer 1

:focus不会选择您的元素，因为它们不可:focus 。

你可以通过在HTML中添加tabindex="-1"或在JS中添加tabIndex = -1来使它们具有可聚焦性。

 var generateIdentifier = Math.random; var currentElement = document.querySelector("[contenteditable]"); [].forEach.call(document.querySelectorAll(".t-wrapper"), function(el) { var first = document.createElement('p'); first.className = "t-empty t-first"; first.id = generateIdentifier(6); first.textContent = 'Press enter to create new paragraphs'; first.tabIndex = -1; el.appendChild(first); }); 

 .container > :focus { border: 1px solid blue; } 

 <div class="container t-wrapper" contenteditable></div> 

似乎如果将它添加到第一段，新段落会自动获取它。 但是如果你想确定，我猜你可以使用变异观察者或keyup事件监听器来检测没有tabindex段落，并添加它：

el.addEventListener("keyup", function(e) {
  var newChild = el.querySelector('p:not([tabindex])');
  if(newChild) newChild.tabIndex = -1;
});

Answer 2

document.activeElement将返回当前关注的元素。