Question

我有一个textarea透明文字，底层pre通过js显示文字，所以看起来用户正在输入动态文字。它与背景颜色on this Regex Tester的概念相同，除了我正在改变文本颜色和背景颜色，所以我想在textarea中使用透明文本。

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

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

注意：我指的是闪烁的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

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

如果你愿意，我可以为你创建一个小提琴/插件示例。

如果您使用的字体不是等宽字体，那么事情就变得越来越难了，但是你使用<pre>标签时你应该对这个标签感到满意（如果有人好奇我可以描述非平凡的，对于我提出的非等宽字体而言，耗费时间并且肯定不是IE兼容的方法。）

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

Answer 2

试试css属性caret-color

textarea {
  caret-color:red;
}

<textarea></textarea>