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

Question

我有一个带透明文本的 textarea，下面有一个通过js显示文本的pre，所以当用户输入动态文本时，它看起来像是用户在打字。它的工作原理与此正则表达式测试器的背景颜色相同，但我正在更改文本颜色和背景颜色，因此我希望中的文本是透明的。

然而，将textarea的颜色定义为透明也会使闪烁的光标变成透明的，这很令人迷惑。是否有一种方法只更改闪烁光标的颜色或仅更改文本的颜色而不影响闪烁的光标？

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

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

- James G.

---

https://dev59.com/MlfUa4cB1Zd3GeqPIXca - akash

那个问题来自2011年，只有一个未被接受的答案是"简单的回答就是你不能..." @ akash 注意我问题中的最后一行。 - James G.

http://stackoverflow.com/questions/10682587/is-there-any-way-to-change-just-the-color-of-the-textarea-cursor-without-changin - akash

这个怎么样？ - akash

天啊，我最初查看了这个网站上的其他问题以及它们为什么不起作用，但是我将其删除了，因为我不确定它是否相关。这两个问题都涉及鼠标光标，而不是文本区域插入符号。在文本框中单击，例如“添加评论”框。我所说的是你正在输入的那个闪烁的竖线。 - James G.

我猜他们把这些链接放在评论中，因为你不能对评论进行反对... @JamesG. 看看我的回答，如果你仍然需要帮助，请告诉我 - 我刚刚也遇到了同样的问题，这是谷歌搜索结果中最先出现的页面之一。 - klh

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的方法来处理非等宽字体）。

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

- klh

Answer 2

尝试使用CSS属性caret-color。

文档在此：w3schools - caret color。

textarea {
  caret-color:red;
}

<textarea></textarea>

- Ahmed Rahmi