如何更改 textarea 中闪烁的光标/插入符号

Question

我有一个带有透明文本的textarea ，带有一个通过 js 显示文本的底层pre ，因此看起来用户正在输入动态文本。 它的工作原理与此 Regex Tester 上的背景颜色相同，但我要更改文本颜色和背景颜色，因此我希望 textarea 中的文本为透明。

但是，将textarea的颜色定义为透明也会使闪烁的光标变得透明，这会令人迷惑。 有没有办法只改变闪烁的光标颜色或只改变文本的颜色而不影响闪烁的光标？

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

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

Answer 1

简单的解决方案，但仅当您使用等宽字体（如 Courier 或 Courier New）时才有效 - 不要将 textarea 的颜色设置为透明，而是在keyDown 上填充任何其他字符的空格：

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

您需要获得插入符号位置以将空格和字符放置在适当的位置，但已经有脚本（例如这个）。

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

如果您使用的字体不是等宽字体，事情会变得越来越困难，但是如果您使用的是<pre>标签，您应该可以接受这个标签（如果有人好奇，我可以描述不平凡，耗时且绝对不是-我想出的非等宽字体的 IE 兼容方法）。

编辑：实际上，您还可以从透明 textarea 获取插入符号位置并将 1px 宽的黑色 div 移动到正确的位置（对于非等宽字体）。 您也可以使用 CSS 动画或 Javascript 使其闪烁。

Answer 2

试试css属性caret-color

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

 textarea { caret-color:red; }

 <textarea></textarea>