contenteditable 元素的placeholder

假设我们希望给定contenteditable元素有一个占位符：

<div contenteditable></div>

1.使用:empty选择器

我们使用自定义属性 ,data-placeholder来设置占位符：

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

当元素值为空时，将显示该属性：

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

2. 处理事件

首先，我们将id和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);
});