Placeholder for a contenteditable element
Assume that we want to have a placeholder for given contenteditable element:
<div contenteditable></div>
1. Use the :empty selector
We use a custom attribute, data-placeholder, to set the placeholder:
<div class="editable" contenteditable data-placeholder="Edit me"></div>
The attribute will be shown when the element value is empty:
.editable:empty:before {
content: attr(data-placeholder);
}
2. Handle the events
First, we add the id and data-placeholder attributes to the element as following:
<div contenteditable data-placeholder="Edit me" id="editMe"></div>
When users focus on the element, we will reset its content if it's the same as the placeholder. Also, when the element loses its focus, its content will be set back to the placeholder if users don't enter anything.
const ele = document.getElementById('editMe');
const placeholder = ele.getAttribute('data-placeholder');
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);
});
Demo
Placeholder for a contenteditable element
See also