将子元素附加到内容可编辑的 div 后，关注子元素答案

【问题标题】：focus on a child element after appending it to a content-editable div将子元素附加到内容可编辑的 div 后，关注子元素
【发布时间】：2020-12-04 22:55:03
【问题描述】：

我有一个按钮，可以将span 添加到内容可编辑的div。我想专注于span，以便用户可以更改它的内容。实际上，这段代码是一个所见即所得的编辑器，因此用户可以在可编辑的div 中键入一些文本，然后按一个按钮来键入突出显示的文本。

这是我的代码：

$("#btn").click(function () {
     var newSpan = document.createElement("span");
     newSpan.classList.add("highlight");
     newSpan.innerHTML = ""; // the span must be empty
     var myDiv = document.getElementById("editable-div");
     myDiv.appendChild(newSpan);
     newSpan.focus();
     // here I expect to be able to change the content of the newSpan, 
     // but I'm still inside the myDiv element.
     // <div id="editable-div" contenteditable="true">
     // <span class="highlight">
     //   I WANT TO BE HERE AFTER APPENDING THE SPAN
     // </span>
     // </div>
});

CSS：

.highlight {
    background-color: yellow;
}

HTML：

<div id="editable-div" contenteditable="true"></div>
<button id="btn">Highlight</button>

注意：如果跨度不为空，则代码可以正常工作，但我想附加一个空跨度。

【问题讨论】：

用户将如何在其中输入内容？您需要创建文本输入吗？
不，我希望用户更改跨度的内容。但是添加span后，用户只能更改div元素的内容。

标签： javascript jquery contenteditable appendchild

【解决方案1】：

这里正在为您要实现的目标工作 sn-p：

var timeout;

$("#btn").click(function() {
  let span = "<span class='highlight' contentEditable='true'></span>";
  $("#editable-div").prop("contentEditable", false);
  $("#editable-div").append(span);
  $("#editable-div span:last-child").focus();


  $("#editable-div span").on("input", function() {
    clearTimeout(timeout);
    let breakOf = 1500;
    timeout = setTimeout(function() {
      $("#editable-div").prop("contentEditable", true);
    }, breakOf);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editable-div" contentEditable='true'>
  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
<button id="btn">Button</button>

【讨论】：

只有当 span 的内容不为空时，您的代码才有效。如果您从跨度中删除“新世界”，它将无法正常工作。实际上，如果您键入新文本，则在附加跨度后它不会突出显示。因为您在 div 而不是跨度内输入。
如果删除span标签内的文本，它会看起来好像它不存在一样。但是，当您尝试键入时，内容会出现。
@user6931342 我已经添加了css，这样当span出现时，即使里面没有文本，你也可以看到它。
div 元素必须是可编辑的。实际上，我的代码是一个所见即所得的编辑器，因此用户可以在可编辑的 div 中键入一些文本，然后单击按钮并添加一个跨度来编写一些突出显示的文本。当 div 可编辑且跨度为空时，您的代码将不起作用。
@user6931342 我已经更新了代码。请检查它是否满足您。