javascript - 当我在可编辑的 div 中按 enter 时，如何阻止 HTML 文档生成另一个 li 元素？

Question

我正在制作一个便签应用程序，您可以在其中为文本添加下划线、加粗、四处移动便笺，以及各种东西。其中一项功能是制作项目符号列表。我在 javascript 中执行此操作，并将 li 元素插入到可写 div 中。这样做的问题是，当我按 Enter 键时，它会生成另一个 li 元素和另一个元素。如何停止生成 li 元素？理想情况下，它就像在谷歌文档中一样，如果你点击空格键然后点击退格键，它会删除它刚刚生成的 li 元素，然后它会停止生成 li 元素。这是我的代码

HTML

    let li = false;
    document.getElementById('add').addEventListener('click', new_table);
    document.getElementById('list').addEventListener('click', function() {
        if (li == false) {
            const liElement = document.createElement('li');
            document.getElementById('text').appendChild(liElement);
            document.querySelector('li').setAttribute("contenteditable", true);
            li = true;
        }
        else {
            li = false;
        }
    });


    function new_table() {
        const div = document.createElement('div');
        div.className = 'draggable';
        div.innerHTML = `
            <div class="dragge"></div>
            <!--<h2>{ % bla % }</h2>-->
            <p>Some content for the draggable sticky note.</p>
            <ul>
                <li><a target="_blank" href="https://esstudio.site/blog/">Writing blog posts</a></li>
                <li>Getting groceries</li>
                <li>Leaving SEO spam on forums</li>
            </ul>
        `;
        document.getElementById('container').appendChild(div);
    }

    var x, y, target = null;

    document.addEventListener('mousedown', function(e) {
        var clickedDragger = false;
        for (var i = 0; e.path[i] !== document.body; i++) {
            if (e.path[i].classList.contains('dragge')) {
                clickedDragger = true;
            }
            else if (clickedDragger && e.path[i].classList.contains('draggable')) {
                target = e.path[i];
                target.classList.add('dragging');
                target.style.zIndex = "30";
                x = e.clientX - target.style.left.slice(0, -2);
                y = e.clientY - target.style.top.slice(0, -2);
                return;
            }
        }
    });

    document.addEventListener('mouseup', function() {
        if (target !== null) target.classList.remove('dragging');
        target.style.zIndex = "1";
        target = null;
    });

    document.addEventListener('mousemove', function(e) {
        if (target === null) return;
        target.style.left = e.clientX - x + 'px';
        target.style.top = e.clientY - y + 'px';
        var pRect = target.parentElement.getBoundingClientRect();
        var tgtRect = target.getBoundingClientRect();

        if (tgtRect.left < pRect.left) target.style.left = 0;
        if (tgtRect.top < pRect.top) target.style.top = 0;
        if (tgtRect.right > pRect.right) target.style.left = pRect.width - tgtRect.width + 'px';
        if (tgtRect.bottom > pRect.bottom) target.style.top = pRect.height - tgtRect.height + 'px';
    });

.new_table {
    width: 30%;
    height: 30px;
}


.draggable {
    width: 400px;
    height: 200px;
    background: #ccc;
    position: relative;
}

.draggable.dragging {
    user-select: none;
}

.dragge {
    height: 30px;
    background: #555;
    color: #555;
}

.dragger::before {
    content: "window";
    color: #fff;
    margin: 5px;
    display: inline-block;
}

.add-container {
    width: 60px;
    height: 60px;
    position: fixed;
    top: 92%;
    right: 20px;
}

.add {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to left, #c8422a, #e68a21);
    margin: auto;
    font-size: 40px;
    color: white;
}

#text {
    background: #ccc;
    min-height: 150px;
    border: 1px solid black;
}

<div style="height: 8040px; border: 1px solid #ccc" id="container">
    <div class="draggable">
        <div class="dragge"></div>
        <h3 contenteditable="true" id="h3">Title goes here</h3>
        <button onclick="document.execCommand('bold');">toggle bold</button>
        <button onclick="document.execCommand('italic');">toggle italic</button>
        <button onclick="document.execCommand('underline');">toggle underline</button>
        <button id="list">bulleted list</button>
        <div id="text" contenteditable="true"></div>
    </div>
</div>
<div class="add-container" id="add">
    <div class="add"><strong>+</strong></div>
</div>

标签： javascripthtmlcss