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

Question

我有一个带有透明文本的textarea，它的底层pre通过js显示文本，所以看起来用户正在输入动态文本。它与背景颜色关于这个Regex测试器的概念相同，只是我要改变文本颜色和背景色，所以我想要文本区域中的透明文本。

然而，将textarea的颜色定义为透明，也会使闪烁的光标变得透明，这让人感到困惑。是否有一种方法只改变闪烁光标的颜色或只改变文本的颜色而不影响闪烁的光标？

我已经浏览过其他问题，但它们没有提供足够的答案。

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

Answer 1

简单的解决方案，但只在使用单间距字体时才能工作(比如“信使”或“信使新”)--不要将textarea的颜色设置为透明，但在keyDown上使用任何其他字符的空格insead填充：

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

您需要获得插入符号的位置，以便将空格和字符放在适当的位置，但是已经有相应的脚本(例如这一个)。

如果你愿意的话，我可以为你创造一个小提琴/柱塞的例子。

如果你使用的字体不是单间距的，但如果你使用的是一个<pre>标签，那么这个字体就会变得越来越难(如果有人好奇的话，我可以描述我想出的非单一节奏字体的非琐碎、耗时和绝对不兼容IE的方法)。

编辑:实际上，您也可以从透明文本区域获得插入符号位置，并将一个1 1px宽的黑色div移动到正确的位置(对于非单频字体)。您也可以使用CSS动画或Javascript将其闪烁。

Answer 2

尝试css属性插入颜色。

这里的文档：w3schools -插入颜色

​

textarea {
  caret-color:red;
}

<textarea></textarea>

​