javascript - 如何防止使用 contenteditable 删除内部跨度？

Question

我有一个使用 HTML 5 标签 contenteditable 的编辑器，我在 contenteditable 中使用 span，当我删除所有文本然后使用 span也被删除，但我希望跨度不应该被删除，如何防止它？

我的代码:--

$('#editor').keyup(function(){
  $('#spanText').text($(this).find('span').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div contenteditable="true" id="editor"><span>This is my text</span></div>

<br><br><hr>
<div id="spanText"></div>

Answer 1

我认为没有直接的方法可以实现这一目标。

您可以检查元素的文本长度以恢复元素。

演示:

$('#editor').keyup(function(){
  if(!$(this).text().length){
    $(this).html('<span>&nbsp;</span>');
  }
  $('#spanText').text($(this).find('span').text().trim());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div contenteditable="true" id="editor"><span>This is my text</span></div>
</div>
<hr>
<div id="spanText"></div>