Как запретить удаление первого тега li из текстового поля div contenteditable?
Подскажите, пожалуйста, как запретить удаление самого первого тега LI в текстовом редакторе div contenteditable? По умолчанию в текстовом редакторе установлен нумерованный список, который при нажатии на энтер создает второй, третий по нумерации список, но когда нужно удалить весь текст, удаляются соответственно и все теги li. Нужно чтобы самый первый LI список не удалялся, а лишь текс.
.fr-element {border: 1px solid red;padding:20px;}
li {border-bottom: 1px solid #666;padding: 5px 0 5px;margin-bottom:10px;}
<div style="min-height: 290px;" class="fr-element fr-view" dir="ltr" aria-disabled="false" spellcheck="true" contenteditable="true">
<ol>
<li>Удаляем текст без возможности удалить первый список LI.</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
</ol>
</div>
Ответы (1 шт):
Автор решения: Denis640Kb
→ Ссылка
Можно попробовать так:
var elem = document.getElementsByClassName('fr-view');
document.onkeydown = function(e) {
if (elem[0].innerText == "Введите первый пункт"){
elem[0].innerHTML = "<ol><li></li></ol>";
}
if (event.code == 'Backspace') {
if (elem[0].innerText.length <= "1"){
elem[0].innerHTML = "<ol><li>Введите первый пункт</li></ol>";
}
}
};
.fr-element {border: 1px solid red;padding:20px;}
li {border-bottom: 1px solid #666;padding: 5px 0 5px;margin-bottom:10px;}
<div style="min-height: 290px;" class="fr-element fr-view" dir="ltr" aria-disabled="false" spellcheck="true" contenteditable="true">
<ol>
<li>Удаляем текст без возможности удалить первый список LI.</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
</ol>
</div>