Question

我有令人满意的设置如下：

<div class="top" contenteditable="true">
   <div class="inner" contenteditable="true" tabindex="-1">
      Good 
      <span class="bot">Awesome</span>
   </div>
</div>

在此设置中，另一个内部有两个contenteditble div。在inner div内部，有一个bot范围。

如果在此bot类（jsfiddle中的案例1或2）之外按Enter键，则会创建一个inner div bot的{{1}} div而以前的inner div不再有bot跨度，这是有道理的。

示例：案例1或2（好）

 <div class="top"...>
   <div class="inner"...>Good</div>
   <div class="inner"...>&nbsp;<span class="bot">Awesome</span></div>
</div>

但是，当在bot span （案例3或4）内按下输入时，它会创建一个相同的inner div以及bot范围以前的inner div仍然有bot个范围。

示例：案例3或4（问题）

 <div class="top"...>
   <div class="inner"...>Good<span class="bot">Awesome</span></div>
   <div class="inner"...><span class="bot"><br></span></div>
 </div>

我想要实现的是当在bot范围的内部按下输入时，我想创建一个相同的inner div，而不是bot范围，如下所示：

<div class="top"...>
   <div class="inner"...>Good<span class="bot">Awesome</span></div>
   <div class="inner"...>&nbsp;</div> //No `bot` span
 </div>

或..

 <div class="top"...>
   <div class="inner"...>Good<span class="bot">Awe</span></div> //enter between 'awesome'
   <div class="inner"...>some</div> //No `bot` span
 </div>

我做了一些研究，但未能找到一个好的答案。任何帮助将不胜感激！

谢谢！

可信的输入行为

0 个答案: