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

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

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

注意：我指的是闪烁的textarea插入符号,而不是鼠标光标.当您单击textarea或文本输入时,会弹出一个闪烁的textarea“光标”或插入符号.这个问题与此有关,而与鼠标光标无关.

最佳答案 简单的解决方案,但只有在使用等宽字体(如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>的sice,则事情变得越来越难.标签你应该没问题这个(如果有人好奇我可以描述非平凡,耗时且肯定不兼容IE的方法,而不是我提出的等宽字体).

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