backspace внутри contenteditable

Question

Есть такая конструкция <article contenteditable="true'><p></p></article>

Когда внутри артикла мы жмем Enter, создается <p></p>, а при нажатии backspace - стирается и если пусто, то удаляется и переходит к предыдущему. Вопрос вот в чем, как избежать удаления последнего <p></p> ?

Т.е. если его удаляют, он снова создается внутри артикла и картетка ставится между тегами <p> и </p>

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

$('html').keyup(function(e) {
  if (e.keyCode == 8) {
    noRemove();
  }
})

function noRemove() {

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


  }
}

.container {
  width: 1000px;
  margin: auto;
}

article {
  border: 1px solid black;
  min-height: 400px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <article id="article" contenteditable="true">
    <p>1 </p>
    <p>2 </p>
  </article>
</div>

В теории работает, но как поставить каретку между тегами не знаю (

БЛОГ НА HUSL

backspace внутри contenteditable

Ответы (0 шт):