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

Question

我有一个使用 HTML 5 标签contenteditable的编辑器，我在contenteditable使用了span ，当我删除所有文本时，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>

Answer 2

将 contenteditable 属性移动到 span

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