contenteditableが偽に設定されたcontententeditable spanで動作しない

Question

私はjsfiddleで複製したcontenteditable divに問題があります。問題は、contenteditable divとhit backspaceの間をクリックしてdiv内のすべてのspanタグが削除された場合です。私はそれを同じように試してみましたが、正常に動作します。しかし、カーソルを最後に置くと、スパンを1つずつ削除しています。

これは

<div contenteditable="true"> 
<span contenteditable="false">value1</span> 
<span contenteditable="false">value2</span> 
<span contenteditable="false">value3</span> 
<span contenteditable="false">value4</span> 
<span contenteditable="false">value5</span> 
<span contenteditable="false">value6</span> 
</div> 
<br/> 

を動作し、これが第一のdivが複製され、下のリンク https://jsfiddle.net/9ruwpyv5/

を参照してください

<div contenteditable="true" id="formulaBox" role="button" tabindex="0"> 
<span style="color: red;" contenteditable="false">SUM</span> 
<span style="color: black;" contenteditable="false">(</span> 
<span style="color: rgb(0, 126, 255);" contenteditable="false">value1</span><span style="color: black;" contenteditable="false">+</span> 
<span style="color: rgb(0, 126, 255);" contenteditable="false">value2</span><span style="color: black;" contenteditable="false">+</span> 
<span style="color: rgb(0, 126, 255);" contenteditable="false">value3</span><span style="color: black;" contenteditable="false">*</span> 
<span style="color: rgb(0, 126, 255);" contenteditable="false">value4</span><span style="color: black;" contenteditable="false">)</span> 
<span style="color: black;" contenteditable="false">/</span> 
<span style="color: blue;" contenteditable="false">AVG</span> 
<span style="color: black;" contenteditable="false">(</span> 
<span style="color: rgb(0, 126, 255);" contenteditable="false">value5</span><span style="color: black;" contenteditable="false">)</span> 
</div> 

ではなく、第二は、実際のコードです。

Answer 1

私はそれを見つけました。私はすべてのスパンタグの間にスペースを追加したところ、問題は解決しました。

$('#formulaBox span').before(" ");