Sometimes, we want to set the placeholder for contenteditable div with JavaScript.
How to set the placeholder for contenteditable div with JavaScript, we will look at in this article.
How to set the placeholder for contenteditable div with JavaScript?
We can set the content to set the placeholder for contenteditable div with JavaScript with CSS style.
For instance, we can write
[contenteditable="true"]:empty:not(:focus):before {
content: attr(data-ph);
color: grey;
font-style: italic;
}
to add a placeholder into the contenteditable div with content: attr(data-ph).
That means, as per placeholder content we use the value of the data-ph .
We use the [contenteditable="true"]:empty:not(:focus):before pseudo-element to select the contenteditable element and place the content as the first child of it.
This will make the content text show at the start of the element.
Conclusion
We can set the content to set the placeholder for contenteditable div with JavaScript with CSS style.