Javascript 如何更改文本区域中闪烁的光标/插入符号

我有一个透明文本的

textarea

，它的底层

pre

通过js显示文本，因此看起来用户在输入动态文本的同时。它的工作原理与背景色相同，只是我正在更改文本颜色和背景颜色，所以我希望文本区域中有透明文本

但是，将

文本区域

的颜色定义为透明也会使闪烁的光标透明，这会使人迷失方向。有没有办法只改变闪烁光标的颜色，或者只改变文本的颜色而不影响闪烁光标

我浏览了其他问题，但没有提供足够的答案

---

注意：我指的是闪烁的文本区域插入符号，而不是鼠标光标。当您单击文本区域或文本输入时，会弹出一个闪烁的文本区域“光标”或插入符号。这个问题是关于这个，而不是关于鼠标光标

这是一个简单的解决方案，但仅当您使用单间距字体（如Courier或Courier New）时才有效-不要将textarea的颜色设置为透明，而是在按下键时，用空格填充它，并插入任何其他字符：

on keyDown ↓
get the character ↓
put it in the underlaying <pre> tag ↓
put a space in the textarea

按下键时

↓
获得角色↓
将其放入参考底图标签中↓
在文本区域中留出一个空格

您需要获得插入符号位置，以便将空格和角色放置在适当的位置，但是已经有了相应的脚本（例如）

如果您愿意，我可以为您创建一个fiddle/plunkr示例

如果你使用的字体不是等距字体，事情会变得越来越难，但是如果你使用的是

标签，你应该对这个标签没问题（如果有人好奇，我可以描述一下我提出的非等距字体的非琐碎、耗时且绝对不兼容IE的方法）

编辑：

---

实际上，您还可以从透明文本区域中获取插入符号位置，并将1px宽的黑色div移动到正确的位置（对于非等距字体）。你也可以使用CSS动画或Javascript来闪烁它。

这个问题是2011年的问题，有一个不被接受的答案是“简单的答案是你不能…”@akash注意我问题的最后一行。这一行呢？天啊，我本来在这个网站上浏览了其他问题，为什么它们不起作用，但是把它拿出来，因为我不确定它是否相关。这两个都是指鼠标光标，而不是文本区域插入符号。单击文本框，如“添加注释”框。你打字的那个闪烁的条就是我说的。