CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rohit Verma
Rohit Verma

Reputation: 3785

How to prevent remove inside span using contenteditable?

I have a editor using HTML 5 tag contenteditable, there i'm using span inside contenteditable, when i remove all text then span also removed but i want span should not be removed, how to prevent it?

My Code:--

$('#editor').keyup(function(){
  $('#spanText').text($(this).find('span').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div contenteditable="true" id="editor"><span>This is my text</span></div>

<br><br><hr>
<div id="spanText"></div>

Upvotes: 2

Views: 724

Answers (2)

Mamun
Mamun

Reputation: 68933

I think there is no straightforward way to achieve that.

You can check the text length of the element to restore the element back.

Demo:

$('#editor').keyup(function(){
  if(!$(this).text().length){
    $(this).html('<span>&nbsp;</span>');
  }
  $('#spanText').text($(this).find('span').text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div contenteditable="true" id="editor"><span>This is my text</span></div>
</div>
<hr>
<div id="spanText"></div>

Upvotes: 1

robinalaerts
robinalaerts

Reputation: 561

Move the contenteditable property to the span

<div>
   <span contenteditable="true" id="editor">This is my text</span>
</div>

Upvotes: 0

Related Questions