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

【问题标题】：How to change blinking cursor/caret in textarea如何更改文本区域中闪烁的光标/插入符号
【发布时间】：2013-12-16 06:23:49
【问题描述】：

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

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

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

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

【问题讨论】：

stackoverflow.com/questions/6092963/…
这个问题来自 2011 年，其中一个未被接受的答案是“简单的答案是你不能......”@akash 请注意我问题的最后一行。
stackoverflow.com/questions/10682587/…
这个呢？
天哪，我最初在这个网站上查看了我看过的其他问题以及为什么它们不起作用，但因为我不确定它是否相关而将其删除。这两个都是指鼠标光标，而不是 textarea 插入符号。单击文本框，例如“添加评论”框。你正在输入的那个闪烁的栏就是我在说的。

【解决方案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）。

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

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

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

【讨论】：

【解决方案2】：

试试 css 属性 caret-color

textarea {
  caret-color:red;
}

&lt;textarea&gt;&lt;/textarea&gt;

【讨论】：