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> <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
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
Recent edits by: Richard, Stephenwalker277, Nathan eddings