Methodfish Articles Library - Adding a placeholder to contenteditable divs (docs) Overview

Written: Jun-2025

To add a placeholder to a div that is contenteditable=true, simply use the following css

css

div[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: #888;
    pointer-events: none; /* so placeholder text doesn't interfere with editing */
    user-select: none; /* prevents selecting placeholder text */
}

To handle empty edits (that result in <br> content), add this event too:

js

document.body.addEventListener('input', function(e) {
    if (e.target.matches('div[contenteditable="true"]')) {
        console.log('Checking ',e.target);
        const text = e.target.innerText.replace(/\u200B/g, '').trim();
        if (text === '') e.target.innerText = null;
    }
});