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.
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