contenteditable span이 false로 설정되어있는 contenteditable span으로 작업하지 않습니다.

Question

jsfiddle에서 복제 한 contenteditable div에 문제가 있습니다. 문제는 내가 contenteditable div와 hit backspace 사이를 클릭하면 div 내의 모든 span 태그가 삭제된다는 것입니다. 나는 그것을 바이올린에서 동일하게 시도했지만 정상적으로 작동합니다. 그러나 끝에 커서를 놓으면 하나씩 스팬이 삭제됩니다.

이

<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/> 

을 작동이 제 1 회 사업부가 복제되는 아래의 링크 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(" ");