在前端开发中，有时需要让用户输入富文本内容，这时候可以使用 HTML 中的 contenteditable 属性来实现。然而，contenteditable 属性并没有内置的 placeholder 功能，也就是说如果用户没有输入内容，那么无法显示提示信息。因此，在本文中，我们将学习如何为 contenteditable div 元素添加 placeholder 功能。
实现方式
添加 placeholder 功能的方法有很多种，下面介绍两种常见的实现方式。
通过 JavaScript 实现
第一种方式是通过 JavaScript 实现，思路比较简单，即通过监听 contenteditable 元素的 focus 和 blur 事件，当元素获得焦点时移除 placeholder，失去焦点时再添加 placeholder。具体代码如下：
<div id="editor" contenteditable="true"></div>
-- -------------------- ---- -------
--- ------ - ----------------------------------
--- ----------- - -----------
-------------------------------- ---------- -
-- ----------------- --- ------------ -
---------------- - ---
-
---
------------------------------- ---------- -
-- ----------------- --- --- -
---------------- - ------------
-
---
---------------- - ------------通过 CSS 实现
第二种方式是通过 CSS 实现，原理是利用 ::before 伪类来插入占位符元素，并在 contenteditable 元素为空时显示占位符元素，非常简洁易懂。具体代码如下：
<div class="editor" contenteditable="true"></div>
-- -------------------- ---- ------- --------------- - -------- ----------- ------ ----- - --------------------- - -------- ------------------ ------ ----- -
兼容性
两种实现方式都比较简单，但是需要注意的是它们在不同浏览器的兼容性上存在差异。
第一种实现方式在 IE9 及以上版本、Chrome、Firefox、Safari 等主流浏览器中均可正常使用。
第二种实现方式在 IE10 及以上版本、Chrome、Firefox、Safari 等主流浏览器中均可正常使用，但是在 IE9 及以下版本中不支持 ::before 伪类，因此无法实现该功能。
总结
在本文中，我们学习了如何为 contenteditable div 元素添加 placeholder 功能，并且介绍了两种实现方式。虽然这两种方式在兼容性上存在差异，但是都比较简单易懂，可以根据具体业务场景选择适合自己的实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30122