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.

Problem

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.

HTML

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

JSFIDDLE with all the code working

https://jsfiddle.net/doug99collins/ts4wdynb/

Sources

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. https://jsfiddle.net/doug99collins/ts4wdynb/

Add a Simple Placeholder to contenteditable div. (Doesn't handle child placeholder elements.) https://community.idera.com/developer-tools/b/blog/posts/faking-a-placeholder-attribute-for-an-editable-div-and-some-css-tricks

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.

Comments

Article Info

Recent edits by: Richard, Stephenwalker277, Nathan eddings

Share this Article: