Draft JS如何隐藏光标 保留正常功能仅去除可见闪烁光标

不需要修改Draft JS内部逻辑，仅通过修改编辑器的视觉样式即可实现需求，所有光标定位、输入、选区操作等原有功能完全不受影响。

方法1：使用caret-color属性（最推荐，兼容性好） #

• 核心原理：CSS原生caret-color属性专门用于控制输入框光标的颜色，设置为透明即可完全隐藏光标的视觉表现，不影响任何交互功能。
• 实现代码：给Draft编辑器默认的内容容器类添加样式即可：

/* 可替换为你自定义的编辑器容器类名 */
.my-draft-editor .public-DraftEditor-content {
  caret-color: transparent;
}

• 优势：无侵入性，不需要调整现有文本样式逻辑，支持Chrome 60+、Firefox 55+、Safari 11.1+等所有主流现代浏览器。

方法2：兼容旧版本浏览器的替代方案 #

如果需要兼容不支持caret-color的旧浏览器，可以通过文本透明+阴影显示的hack实现：

• 实现代码：

.my-draft-editor .public-DraftEditor-content {
  /* 文本本身设为透明，隐藏附带的光标 */
  color: transparent;
  /* 用文本阴影还原文本的视觉显示，色值替换为你的实际文本颜色 */
  text-shadow: 0 0 0 #333;
}
/* 修复选中文本的显示异常 */
.my-draft-editor .public-DraftEditor-content::selection {
  background: #1a73e8;
  text-shadow: none;
  color: #fff;
}

• 注意事项：如果你的富文本存在多色文字、高亮等自定义样式，需要对应调整不同样式节点的text-shadow属性适配。

内容的提问来源于stack exchange，提问作者user3472360