Проблема с 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>');
});
Как курсор перенести внутрь параграфа - не знаю. |
|
Цитата:
|
Цитата:
Получится что-то такое: https://jsfiddle.net/a5epzt70/ |
Пробовал так..проблема в том, что если зажать backspace и начать писать, то это сломается :(
|
shareware, попробуйте слушать другое событие.
Я нашел нужное, которое решает вашу проблему. |
Полагаю, Вы про keydown ? Я попробовал Ваш код, у меня получается все равно так, как и было..ерунда какая то.
https://ibb.co/yPrcp9X Т.е. параграф создается ,но текст все равно пишется вне него самого |
Цитата:
Цитата:
В моем примере далеко не последнюю роль играют стили элементов. |
Конечно прочитал, что уж Вы так )
Стили у меня прописаны..сейчас попробовал поставить <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>
|
Цитата:
|
Да, указал..но почему то не работало..может быть какая то особенность браузера опера или потусторонние силы )
|
Цитата:
<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>
|
Огромное спасибо!
|
contenteditable запрет удаления последнего абзаца на js
на примере кода от 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>
|
И Вам большое спасибо :)
|
| Часовой пояс GMT +3, время: 08:58. |