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

Question

我有一个textarea透明的文本，其底层pre通过js显示文本，因此用户似乎在输入动态文本。它与此Regex Tester上的背景颜色具有相同的概念，除了我要更改文本颜色和背景颜色外，因此我希望在文本区域中使用透明文本。

但是，将textarea的颜色定义为透明，也会使闪烁的光标变为透明，从而使方向迷惑。有没有一种方法只能更改闪烁的光标颜色或仅更改文本的颜色而不影响闪烁的光标？

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

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

Answer 1

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

\n\n

on keyDown \xe2\x86\x93\nget the character \xe2\x86\x93\nput it in the underlaying <pre> tag \xe2\x86\x93\nput a space in the textarea\n

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n