Проблема с contenteditable

[shareware]

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

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

Существует такая конструкция:
<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>');
}

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

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

[Nexus]

Попробуйте так:
$('#article').keyup(function () {
if (this.querySelector('p')) return;

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

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

[рони]

shareware,
https://javascript.ru/forum/dom-window/81181-sobytiya-pri-fokuse-na-ehlemente-s-contenteditable.html

[shareware]

shareware,
https://javascript.ru/forum/dom-window/81181-sobytiya-pri-fokuse-na-ehlemente-s-contenteditable.html
Это не решает проблемы с удалением последнего параграфа..даже в тех примерах, если нажать backspace то он просто удалится и будешь писать не в параграфе, а внутри contenteditable

[Nexus]

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

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

[shareware]

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

[Nexus]

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

[shareware]

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

[Nexus]

Полагаю, Вы про keydown ?
Да, про него.

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

[shareware]

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

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

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

[Nexus]

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

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

<style>
p {
min-height: 20px;
background: red;
color: white;
}
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
$('#article').keydown(function () {
if (this.querySelector('p')) return;

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

[shareware]

Да, про него.


А вы тему, ссылку на которую рони предоставил читали?
В моем примере далеко не последнюю роль играют стили элементов.
Пока не отошли от темы..не знаете, нельзя ли вообще исключить удаление последнего <p> ? Т.к. если мы его добавляем, то каретка дергается, что выглядит некрасиво

[shareware]

Да, указал..но почему то не работало..может быть какая то особенность браузера опера или потусторонние силы )

[Nexus]

не знаете, нельзя ли вообще исключить удаление последнего <p> ?

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

<style>
p {
min-height: 20px;
background: red;
color: white;
}
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
$('#article').keydown(function (e) {
const paragraphs = this.querySelectorAll('p');
if (paragraphs.length > 1 || e.originalEvent.code !== 'Backspace') return;

if (!paragraphs[0].textContent.length) e.preventDefault();
});
</script>

[shareware]

Огромное спасибо!

[рони]

на примере кода от Nexus,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
p {
min-height: 20px;
background: red;
color: white;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#article").addEventListener("keydown", function(event) {
const paragraphs = this.querySelectorAll('p');
if(event.code == 'Backspace' && paragraphs.length == 1 && !paragraphs[0].textContent.length) event.preventDefault();
})
});
</script>
</head>
<body>
<article id="article" contenteditable="true">
<p class="paragraph">some..</p>
</article>
</body>
</html>

[shareware]

И Вам большое спасибо :)