当使用 `:before` 伪元素实现 contenteditable div 的占位符时，点击占位符文字无法触发输入光标，根本原因是伪元素默认捕获鼠标事件；只需为 `:before` 添加 `pointer-events: none` 即可透传点击事件到底层可编辑区域。
在构建富文本输入组件（如评论框）时，由于 <div contenteditable> 不原生支持 placeholder 属性，开发者常借助 CSS :before 伪元素模拟占位符效果。但该方案存在一个典型交互缺陷：用户点击“Type comment”文字区域时，焦点虽能正确触发（focus 事件被触发），却无法立即获得光标、也无法输入内容——这是因为 :before 生成的伪元素实际覆盖在可编辑区域之上，拦截了 pointer 事件。
✅ 正确解法是显式禁用伪元素的鼠标事件响应：
.commentInput:not(:focus):empty:before {
content: "Type comment";
color: #aaa;
pointer-events: none; /* 关键：透传点击/聚焦事件到底层 contenteditable 元素 */
}同时建议优化 CSS 选择器逻辑：
- 使用 :not(:focus):empty 替代 :empty:not(:focus)（语义更清晰，兼容性一致）；
- 确保 .commentInput 具备明确的高度（如 min-height: 50px），避免 :empty 判定异常；
- 为提升可访问性，保留 role="textbox"（而非 role="textarea"，因原生 <textarea> 是替换元素，而 contenteditable 应匹配 textbox 角色）和 aria-label 作为兜底。
完整推荐代码示例：
立即学习“前端免费学习笔记（深入）”；
<div
role="textbox"
aria-label="Add a comment"
contentEditable
ref={commentBoxRef}
className={modalStyle.commentInput}
onKeyDown={handleKeyDown}
/>.commentInput {
width: 100%;
min-height: 50px;
padding: 8px 12px;
outline: none;
overflow-y: auto;
background-color: #242424;
border-radius: 8px;
border: 1px solid #555;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.5;
}
.commentInput:not(:focus):empty:before {
content: "Type comment";
color: #777;
pointer-events: none;
}⚠️ 注意事项：
- pointer-events: none 不影响伪元素的渲染与样式，仅解除其对鼠标/触控事件的捕获；
- 避免在 :before 中设置 cursor: text，否则可能误导用户认为该区域可编辑；
- 若需支持 IE11，请注意 pointer-events: none 在 IE 中对伪元素的支持有限（IE11 支持，IE10 及更早不支持），必要时可降级为 JS 动态插入 placeholder <span> 并管理显示逻辑；
- 始终通过 aria-label 或 aria-placeholder 提供无障碍支持，确保屏幕阅读器能正确播报提示信息。
此方案轻量、标准、无 JS 依赖，是 contenteditable 占位符的最佳实践之一。
