Contenteditable: Add div instead of br

Question

I have a div with contenteditable enabled. When pressed enter, it inserts br or when everything is emptied (by deleting the contents inside), it also inserts br.

Is there a way to control what gets inserted in either cases? For example, I want to insert a div when pressed enter. Furthermore I want to include a div (which acts more like placeholder) when I delete everything inside.

For the second part (ie: div that acts like placeholder), I know I can use css such as below:

div.example[contenteditable]:empty::before {
  content: "Acts like a placeholder";
}

But it seems that when I delete everything inside, br is inserted and I can't get rid of it.

Hope I am being clear. Anyway, any help will be much appreciated.

Thank you.

Answer 1

You can handle Enter key event and include div on insertion or deletion by checking the content length

check the following snippet

$(document).ready(function() {

});

jQuery('#editDiv').on("keypress", function(e) {

  if (e.keyCode == 13) {
    $(this).append("<div>new div</div>")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="editDiv">
  hello
</div>

you can check this link too Jquery Event : Detect changes to the html/text of a div

Hope it helps