contentEditable元素点击CSS伪元素占位符无法输入问题求助

问题根源在于CSS伪元素的点击拦截：你用:empty:not(:focus):before生成的占位符是伪元素，它会占据div的点击区域，但div本身为空时，点击伪元素区域浏览器无法正确将光标插入div，导致无法输入。

下面是两种有效的解决方式：

方法1：CSS穿透点击（推荐） #

通过修改CSS让伪元素不拦截点击事件，同时调整定位确保占位符不影响光标位置：

.commentInput {
    width: 100%;
    height: 100%;
    outline: none;
    overflow-y: scroll;
    padding: 4px;
    background-color: #242424;
    border-radius: 8px;
    resize: none;
    border: 1px solid gray;
    position: relative; /* 为伪元素提供定位基准 */
}

.commentInput:empty:not(:focus):before {
    content: "Type comment";
    color: grey;
    pointer-events: none; /* 关键：让点击穿透到下方的div元素 */
    position: absolute;
    top: 4px; /* 和div的padding值保持一致，保证占位符位置正确 */
    left: 4px;
}

pointer-events: none会让伪元素不响应点击事件，点击占位符区域时实际触发div的点击，浏览器就能正确定位光标。

方法2：结合JS手动定位光标 #

如果CSS方法存在兼容问题，可以添加点击事件处理，手动将光标插入空div中：

首先修改React组件的div，添加onClick事件：

<div
 role="textarea"
 aria-expanded={false}
 contentEditable
 ref={commentBoxRef}
 className={modalStyle.commentInput}
 onKeyDown={handleKeyDown}
 onClick={handleCommentBoxClick}
/>

然后实现handleCommentBoxClick函数：

const handleCommentBoxClick = () => {
  const box = commentBoxRef.current;
  if (box && box.textContent.trim() === '') {
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(box);
    range.collapse(true); // 将光标定位到内容起始位置
    selection.removeAllRanges();
    selection.addRange(range);
  }
};

这个方法会在点击空div时，强制将光标插入正确位置，确保可以直接输入。

内容的提问来源于stack exchange，提问作者MD. Jayeen Bin Alam