contenteditable inside div是主要的

Question

当我在其中放置一个 div 时，我希望用户编写的第一件事是创建一个基本且未删除的 div，并且文本在 div 中

我不喜欢这个：

我喜欢这个：

即使用户删除了所有内容，里面仍然有他写的div

Answer 1

此功能可以帮助您添加一个EventListener（双击）到所需的div。

双击后，将禁用触发功能，并将所有内容添加到Input类型的元素中进行编辑。

如果用户按回车键或 FocusOut 元素将完成编辑，导致其所有值进入原始父级div并再次添加editThis函数。

注意：我建议为父级div添加一个最小宽度，这样它就可以双击了。

document.querySelector("div").addEventListener("dblclick", editThis);

function editThis() {
    this.removeEventListener("dblclick", editThis)
    var triggerElement = this
    var content = this.textContent;

    this.innerHTML = `<input type="text" id="editing" value="${content}">`;
    document.getElementById("editing").focus();
    document.getElementById("editing").addEventListener("keypress", (e) => {
        if (e.key != "Enter") return;
        var newValue = document.getElementById("editing").value;

        triggerElement.innerHTML = "";
        triggerElement.textContent = newValue;
        triggerElement.addEventListener("dblclick", editThis);
    })
    document.getElementById("editing").addEventListener("focusout", (e) => {
        var value = document.getElementById("editing").value;
        triggerElement.innerHTML = "";
        triggerElement.textContent = newValue;
        triggerElement.addEventListener("dblclick", editThis);
    })
}