我有一个带有透明文本的textarea，它的底层pre通过js显示文本，所以看起来用户在输入动态文本。它的工作原理与Regex Tester上的背景色相同，只是我正在更改文本颜色和背景色，所以我希望文本区域中有透明的文本。
然而，将textarea的颜色定义为透明，也会使闪烁的光标透明，这会让人迷失方向。有没有办法只更改闪烁光标的颜色，或者只更改文本的颜色而不影响闪烁光标？
我浏览了其他问题，但它们没有提供足够的答案。
注意：我指的是闪烁的文本区域插入符号，而不是鼠标光标。当您点击文本区域或文本输入时，会弹出一个闪烁的文本区域"光标"或插入符号。这个问题是关于这个，而不是关于鼠标光标。
这是一个简单的解决方案，但只有当您使用单格字体（如Courier或Courier New）时才有效-不要将文本区域的颜色设置为透明，但在keyDown上用空格插入任何其他字符：
on keyDown ↓
get the character ↓
put it in the underlaying <pre> tag ↓
put a space in the textarea
您需要获得插入符号的位置来将空格和字符放置在适当的位置，但已经有了相应的脚本（例如这个）。
如果你愿意的话，我可以为你创建一个小提琴/plunkr的例子。
如果你使用的字体不是单空间的，事情会变得越来越困难，但如果你使用<pre>标签，你应该可以接受这个标签（如果有人好奇，我可以描述我提出的非单空间字体的非琐碎、耗时且绝对不兼容IE的方法）。
编辑：实际上，您还可以从透明文本区域获取插入符号位置，并将1px宽的黑色div移动到正确的位置（对于非等宽字体）。您也可以使用CSS动画或Javascript使其闪烁。
尝试css属性插入符号颜色
这里的文档：w3schools-插入符号颜色
textarea {
caret-color:red;
}<textarea></textarea>