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

Question

我有一个将 a 添加span到 content-editable的按钮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>

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

标签： javascriptjquerycontenteditableappendchild

Answer 1

这是您要实现的目标的工作片段：

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>