Проблема с contenteditable
 

Ребятушки, прошу прощения, если тема не в своем разделе.

Подскажите, как пофиксить такой недуг:

Существует такая конструкция:

<article id="article" contenteditable="true">
<p class="paragraph">some..</p>
</article>

Когда мы внутри артикла жмякаем Enter, то создается новый

<p></p>

и курсор автоматически ставится внутрь него. Это хорошо.

Когда же мы удаляем содержимое, нажимая Backspace, то удаляется текст и затем пустой тег. Как сделать так, чтобы не удалялся последний

<p></p>

? Либо если удалился ,то автоматически создавался и каретка ставилась внутрь него. А то получается, что тег стирается и мы просто пишем внутри артикла, а не внутри параграфа.

Я пробовал такое

var elem = $('article#article').children().toArray();
	console.log(elem);
	if (elem.length <= 1)
	{
		$('article#article').append('<p class="paragraph"> </p>');
        }

Как бы и работает, но не работает. Помогите, пожалуйста.

Надеюсь понятно объяснил ))

Попробуйте так:

$('#article').keyup(function () {
    if (this.querySelector('p')) return;

    $(this).append('<p class="paragraph"></p>');
});

Как курсор перенести внутрь параграфа - не знаю.

shareware,
https://javascript.ru/forum/dom-wind...teditable.html

Это не решает проблемы с удалением последнего параграфа..даже в тех примерах, если нажать backspace то он просто удалится и будешь писать не в параграфе, а внутри contenteditable

Посмотрите на мой код, выясните чего не хватает. Ознакомьтесь с примером рони и дополните мой вариант.

Получится что-то такое: https://jsfiddle.net/a5epzt70/

Пробовал так..проблема в том, что если зажать backspace и начать писать, то это сломается :(

shareware, попробуйте слушать другое событие.
Я нашел нужное, которое решает вашу проблему.

Полагаю, Вы про keydown ? Я попробовал Ваш код, у меня получается все равно так, как и было..ерунда какая то.
https://ibb.co/yPrcp9X
Т.е. параграф создается ,но текст все равно пишется вне него самого

Да, про него.

А вы тему, ссылку на которую рони предоставил читали?
В моем примере далеко не последнюю роль играют стили элементов.

Конечно прочитал, что уж Вы так )

Стили у меня прописаны..сейчас попробовал поставить <br> внутрь создаваемого параграфа и вот только так начало работать..ни с чем другим почему то не хотело.

Так или иначе спасибо большое за помощь )