contenteditable 的占位符

什么是 contenteditable？

contenteditable 是一个 HTML 属性，它可以应用于任何 HTML 元素，使它们成为可编辑的区域。如果将此属性应用于文本区域或输入字段，则用户可以直接在网页上编辑文本，而无需使用外部编辑器或其他工具。

<div contenteditable="true">
  这是一个可编辑的区域。
</div>

如何使用占位符？

占位符是提供文本区域默认值的一种方式，当文本区域没有文本时，它会出现。使用占位符可以帮助用户了解他们应该输入什么内容。

在 HTML5 中，我们可以使用 placeholder 属性添加占位符。

<input type="text" placeholder="请输入姓名">

然而，在使用可编辑区域时，我们不能使用 placeholder 属性。相反，我们可以使用 JavaScript 或 CSS 实现占位符。

使用 JavaScript 请求焦点

<div contenteditable="true" id="editable"></div>

#editable[placeholder]:empty:before {
  content: attr(placeholder);
  color: #aaa;
}

var editable = document.getElementById('editable');

editable.addEventListener('focus', function() {
  if (this.innerHTML == this.getAttribute('placeholder')) {
    this.innerHTML = '';
  }
});

editable.addEventListener('blur', function() {
  if (this.innerHTML == '') {
    this.innerHTML = this.getAttribute('placeholder');
  }
});

editable.innerHTML = editable.getAttribute('placeholder');

使用 CSS ::before 伪元素

<div contenteditable="true" placeholder="请输入内容"></div>

div[contenteditable][placeholder]:empty::before {
  content: attr(placeholder);
  color: #ccc;
}

代码片段

<div contenteditable="true" id="editable"></div>

#editable[placeholder]:empty:before {
  content: attr(placeholder);
  color: #aaa;
}

div[contenteditable][placeholder]:empty::before {
  content: attr(placeholder);
  color: #ccc;
}

var editable = document.getElementById('editable');

editable.addEventListener('focus', function() {
  if (this.innerHTML == this.getAttribute('placeholder')) {
    this.innerHTML = '';
  }
});

editable.addEventListener('blur', function() {
  if (this.innerHTML == '') {
    this.innerHTML = this.getAttribute('placeholder');
  }
});

editable.innerHTML = editable.getAttribute('placeholder');

以上代码片段演示如何使用 JavaScript 和 CSS 实现可编辑区域的占位符。我们首先在 HTML 中添加 contenteditable 属性和 placeholder 属性。然后，我们使用 CSS 设置占位符的样式。最后，使用 JavaScript 监听 focus 和 blur 事件，在输入区域中添加和删除占位符。