CODEWITHSUNDEEP
javascripthtmlcontenteditable
Rishi0405
Rishi0405

Reputation: 354

Contenteditable not working with contententeditable span inside set to false

I have a problem with the contenteditable div which I have replicated in jsfiddle. The problem is when I click in between the contenteditable div and hit backspace all the span tag inside the div is deleted. I tried it the same in the fiddle but it works normal. But when I place the cursor at the end it is deleting the span one by one.

This works

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

and this is not

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

Refer the below link https://jsfiddle.net/9ruwpyv5/

The 1st div is replicated and the second is the actual code.

Upvotes: 0

Views: 864

Answers (1)

Rishi0405
Rishi0405

Reputation: 354

I found it. I just added a space in between all the span tag and it solved the issue. 

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

Upvotes: 0

Related Questions