contenteditable 的一些问题

Question

https://codepen.io/hellozdq/p...

使用contenteditable的时候会出现一些问题
1、进行删除的时候剩下最后一个标签元素的时候会删不了
像这样就删不了

2、有时候删完的时候会出现<br>标签
3、当点击标签的时候有没有办法让焦点显示在标签的前面或后面

请教下怎么处理这些问题？

Answer 1

在前后各加一个空格

<div style="border:solid 1px #000;padding:10px;" contenteditable>
  &nbsp;
  <span contenteditable=false style="color:blue">{客户名称}</span>
  的
  <span contenteditable=false style="color:blue">{客户电话}</span>
  &nbsp;
</div>