Placeholder of contentedable element

Suppose we want to give contenteditable Element has a placeholder ：

<div contenteditable></div>

1. Use :empty Selectors

We use custom properties ,data-placeholder To set placeholders ：

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

When the element value is empty , The attribute will be displayed ：

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

2. Handling events

First , We will id and data-placeholder Attribute is added to the element , As shown below ：

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

When the user pays attention to this element , If it is the same as the placeholder , We will reset its contents . Besides , When an element loses focus , If the user does not enter anything , Its contents will be set back to placeholders .

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);
});