Add Placeholder to Multiple Child Elements of Contenteditable Div

Edited by Doug Collins, Patrick Murphy, Maria Quinney, Nathan eddings and 3 others

This article will show you how to add placeholder text on multiple child elements within a contenteditable div. This is really handy when you want to have placeholder text on various fields within the contenteditable div.


Once you set a div to contenteditable='true' the child elements (divs) no longer get input events. This means you don't know when the user has edited a particular element. In this article we will create a way to identify the active element being edited. In addition we will be adding placeholder text that will dissappear when the user types over it.


<div contenteditable='true' class='editable'>
  <div id='frog' class="frog" child-placeholder='Enter some text 1'><br>
  <div style='background:yellow'>
    Some non content editable field is here.  On both sides we have placeholder text you can edit.
  <div id='toad' class="toad" child-placeholder='Enter some text 2'>

JSFIDDLE with all the code working


Not all the code is my own but it is derivatives of chunks of code I found all over the internet.

Identify active child div inside contenteditable div.

Add a Simple Placeholder to contenteditable div. (Doesn't handle child placeholder elements.)

If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.


Article Info

Recent edits by: Richard, Stephenwalker277, Nathan eddings

Share this Article: