將子元素附加到內容可編輯的 div 后，關注子元素

Question

我有一個按鈕，可以將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>

注意：如果跨度不為空，則代碼可以正常工作，但我想 append 為空跨度。

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>