在前端开发中，contenteditable 是一个非常有用的特性，它可以让用户通过浏览器直接编辑页面上的文本内容。然而，在使用 contenteditable 时，经常会遇到一些问题，特别是关于占位符和焦点事件的处理。在这篇文章中，我们将深入探讨这些问题，并提供一些解决方案和指导意义。
占位符
在很多场景下，我们希望在 contenteditable 中添加一个占位符，以提示用户应该输入什么内容。比如下面这个例子：
<div contenteditable="true"> <span class="placeholder">请输入内容...</span> </div>
在这个例子中，我们在 div 中插入了一个 span 元素，并为其添加了一个 class 名称为 placeholder。当用户点击 div 开始编辑时，我们希望这个占位符会消失，并且用户编辑的内容会出现在 div 中。但是，当用户删除所有的内容后，我们又希望占位符会重新出现。
实现这个功能的关键在于监听 contenteditable 元素的 input 事件，并根据元素是否为空来判断是否要显示占位符。代码如下：
-- -------------------- ---- -------
----- ----------- - ------------------------------------------------
----- ----------- - -----------------------------------------
------------------------------------- -- -- -
-- ------------------------------- --- --- -
--------------------------------------
- ---- -
-----------------------------------
-
--在上面的代码中，我们首先获取 contenteditable 元素和占位符元素，并监听 input 事件。当内容变化时，我们检查元素是否为空，并根据需要隐藏或显示占位符。
注意，我们为占位符添加了一个类 hidden，这个类定义了 display: none，用于隐藏占位符。在 CSS 中，我们可以这样定义该类：
.hidden {
display: none;
}焦点事件
另一个常见的问题是在 contenteditable 中处理焦点事件。比如，在用户将光标移动到 contenteditable 元素中时，我们希望一些特定的操作会触发，比如自动弹出键盘或者显示菜单等。
实现这个功能需要使用 selectionStart 和 selectionEnd 这两个属性来监控光标的位置，并根据需要触发某些操作。下面是一个简单的例子：
-- -------------------- ---- -------
----- ----------- - ------------------------------------------------
------------------------------------- -- -- -
--------------------- --- -- ----------
--
------------------------------------ -- -- -
--------------------- --- ---- --------
--
--------------------------------------- ------- -- -
-- ---------- --- --- -- ------------------------------ --- -- -
----- ----------- - -----------------------------
--------------------- - -------------------------------------
------------------------------------
-
--在上面的代码中，我们首先获取 contenteditable 元素，并监听 focus、blur 和 keydown 事件。当元素获得或失去焦点时，我们可以触发一些相应的操作。当用户按下 @ 键并且 contenteditable 中没有任何内容时，我们创建一个包含人名列表的 div，并插入到 contenteditable 中。
需要注意的是，光标的位置可能会受到其他因素的影响，比如通过 JavaScript 移动光标或者设置选中文本等，这些情况需要特别处理。
总结
在本文中，我们深入探讨了在 contenteditable 中处理占位符和焦点事件的问题，并提供了一些解决方案和指导意义。希望这些内容能够对你在实际开发中遇到的问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13456