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

Javascript - Get element behind caret in child elements of [contenteditable]

本文关键字：元素 插入 符号 获取 contenteditable Javascript      更新时间：2023-09-26

我正在用Javascript构建一个简单易用的文本编辑器，基本上是一个所见即所得的编辑器。我将使用主包装器的 contenteditable 属性 （ .wrapper ）。当您在.wrapper内按 Enter 键时，具有唯一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()来获取特定元素。

: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;
});

document.activeElement将返回当前聚焦的元素。

相关文章：