Javascript 在 innerhtml 创建的对象上 contenteditable

Question

我有这段代码应该创建一个可编辑的新列表项 (li) (contenteditable="true"):

var currenthtml = document.getElementById("0").innerHTML;
var newhtml = currenthtml + '<li class="object" contenteditable="true">...</li>';

对象已创建并可见，编辑后#0的purehtml为：

<div id="0">
    <li class="object" contenteditable="true">First object</li>
</div>

为了保存内容，我有以下帮手：

function SaveObject(html) {
    localStorage.setItem("obj", html);
}

应该调用的原因是：

$('li[contenteditable]').keydown(function(e) {
    if (e.keyCode === 13) {
        document.execCommand('insertHTML', false, '');
        $(this).blur();

        var html = document.getElementById("0").innerHTML;
        SaveObject(html);

        return false;
    }
});

（其他情况我会改成省钱的，但这是目前的省钱方式。）

但是当我编辑一个新项目并尝试保存时，它并没有保存文本。它暂时保留在那里，但随后变为默认的“...”。我怎样才能使这项工作？

#0是这样设置的

if(localStorage.getItem("obj") != null) {
    document.getElementById("0").innerHTML = localStorage.getItem("obj");
}

Answer 1

嗯，您应该检查几个步骤：

在您的 keydown 处理程序中，检查 html:

的值

$('li[contenteditable]').keydown(function(e) {
    if (e.keyCode === 13) {
        document.execCommand('insertHTML', false, '');
        $(this).blur();

        var html = document.getElementById("0").innerHTML;
        console.log(html); // is the value equal to what is expected?
        SaveObject(html);

        return false;
    }
});

其次，尝试保存后是否直接保存到本地：

$('li[contenteditable]').keydown(function(e) {
    if (e.keyCode === 13) {
        document.execCommand('insertHTML', false, '');
        $(this).blur();

        var html = document.getElementById("0").innerHTML;
        SaveObject(html);
        console.log(localStorage.getItem("obj")); // is the value equal to what was saved?

        return false;
    }
});

如果两个答案是 "yes"，请在重新加载页面后检查值：只需在控制台中输入 localStorage.getItem("obj")。
最后，如果数据仍然存在，请确保将其实际添加回 DOM。您没有向我们展示将带有已保存数据的列表项添加到页面的代码。

Javascript 在 innerhtml 创建的对象上 contenteditable

Javascript contenteditable on innerhtml created object

html

javascript

jquery

contenteditable