Placeholder for a contenteditable element

<div contenteditable></div>

<div class="editable" contenteditable data-placeholder="Edit me"></div>

.editable:empty:before {
    content: attr(data-placeholder);
}

<div contenteditable data-placeholder="Edit me" id="editMe"></div>

const ele = document.getElementById('editMe');

// Get the placeholder attribute
const placeholder = ele.getAttribute('data-placeholder');

// Set the placeholder as initial content if it's empty
ele.innerHTML === '' && (ele.innerHTML = placeholder);

ele.addEventListener('focus', function (e) {
    const value = e.target.innerHTML;
    value === placeholder && (e.target.innerHTML = '');
});

ele.addEventListener('blur', function (e) {
    const value = e.target.innerHTML;
    value === '' && (e.target.innerHTML = placeholder);
});