Блог

Главная - Вопросы по программированию - Как остановить создание HTML-документа другим элементом li при нажатии клавиши enter в редактируемом div?

Как остановить создание HTML-документа другим элементом li при нажатии клавиши enter в редактируемом div?

#javascript #html #css

Вопрос:

Я создаю приложение для заметок, в котором вы можете подчеркивать свой текст, выделять его жирным шрифтом, перемещать заметки по кругу и все такое прочее. Одной из функций является составление маркированного списка. Я делаю это в javascript и вставляю элементы li в доступный для записи div. Проблема в том, что, когда я нажимаю enter, он генерирует еще один элемент li и еще один. Как я могу прекратить генерировать элементы li? В идеале это было бы похоже на google docs, где, если вы нажмете пробел, а затем нажмете backspace, он удалит только что созданный элемент 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 amp;amp; 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>
Метки: