Как в contenteditable предотвратить удаление элемента и сделать перенос по параграфам? Имеется пустой . При перезагрузке страницы вставляю посредством JS внутрь параграф . Все бы хорошо, но при редактирование текста и полном удалении всех объектов внутри больше не создаются.
Поэтому вопрос такой. Как предотвратить полное удаление всех элементов внутри contenteditable, либо как установить значение по-умолчанию, когда даже курсор находится внутри?
Фрейворки и т.д. не предлагать, так как пишу ради изучения и практики, хочу разобраться, но уже трое суток не могу найти истину. Заранее спасибо.
Как в contenteditable предотвратить удаление элемента и сделать перенос по параграфам? Имеется пустой . При перезагрузке страницы вставляю посредством JS внутрь параграф . Все бы хорошо, но при редактирование текста и полном удалении всех объектов внутри больше не создаются.
Поэтому вопрос такой. Как предотвратить полное удаление всех элементов внутри contenteditable, либо как установить значение по-умолчанию, когда даже курсор находится внутри?
Фрейворки и т.д. не предлагать, так как пишу ради изучения и практики, хочу разобраться, но уже трое суток не могу найти истину. Заранее спасибо.
Поэтому вопрос такой. Как предотвратить полное удаление всех элементов внутри contenteditable, либо как установить значение по-умолчанию, когда даже курсор находится внутри?
Фрейворки и т.д. не предлагать, так как пишу ради изучения и практики, хочу разобраться, но уже трое суток не могу найти истину. Заранее спасибо.
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки в течение 1 года
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Поможем написать учебную работу
Для предотвращения полного удаления всех элементов внутри contenteditable можно использовать обработчики событий и проверку на наличие контента внутри элемента. Вот пример кода, который поможет вам решить эту проблему:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent deletion of elements in contenteditable</title>
<style>
.content {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="content" contenteditable="true"></div>
<script>
const content = document.querySelector('.content');
content.innerHTML = '<p></p>'; // Вставляем параграф по умолчанию
// Обработчик события input
content.addEventListener('input', function() {
// Проверяем, содержит ли элемент контент
if (!content.innerHTML.trim()) {
content.innerHTML = '<p></p>'; // Если нет, вставляем параграф по умолчанию
}
});
// Обработчик события keydown
content.addEventListener('keydown', function(e) {
// Проверяем, была ли нажата клавиша Backspace и если контент пустой
if (e.key === 'Backspace' && !content.innerHTML.trim()) {
e.preventDefault(); // Предотвращаем удаление элемента
}
});
</script>
</body>
</html>
Этот код предотвращает полное удаление всех элементов внутри contenteditable, вставляя параграф по умолчанию, если контент отсутствует, и предотвращает удаление элемента, если контент пустой. Надеюсь, это поможет вам решить вашу проблему.