steve Kim steve Kim - 4 months ago 45
CSS Question

Contenteditable: Add div instead of br

I have a div with

enabled. When pressed enter, it inserts
or when everything is emptied (by deleting the contents inside), it also inserts

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,
is inserted and I can't get rid of it.

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

Thank you.


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=""></script>
<div contenteditable="true" id="editDiv">

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

Hope it helps