Как изменить мерцающий курсор/каретку в textarea

Question

У меня есть textarea с прозрачным текстом, с базовым pre, который отображает текст через js, поэтому он выглядит так, как будто пользователь вводит динамический текст по ходу. Он работает по той же концепции, что и цвета фона on this Regex Tester, за исключением того, что я меняю цвет текста и цвет фона, поэтому я хочу прозрачный текст в текстовом поле.

Однако, определяя цвет textarea как прозрачный, также становится прозрачным мигающий курсор, который дезориентирован. Есть ли способ изменить цвет мигающих курсоров или изменить цвет текста и не повлиять на мигающий курсор?

У меня есть другие вопросы, но они не дали достаточных ответов.

Примечание: Я имею в виду мигающий textarea caret, а не курсор мыши. Когда вы нажимаете текстовое поле или текстовый ввод, появляется мигающий текст «курсор» или каретка. Этот вопрос связан с этим, а не с курсором мыши.

Answer 1

Простое решение, но работает только если вы используете моноширинный шрифт (например, Courier или Courier New) - не устанавливать цвет TEXTAREA, чтобы прозрачна, но на KeyDown заполнить его с пробелами в INSEAD любых других символов:

on keyDown ↓ 
get the character ↓ 
put it in the underlaying <pre> tag ↓ 
put a space in the textarea 

Вы должны были бы получить позицию курсора, чтобы поместить пространство и символ в соответствующем месте, но есть сценарии для этого уже (this one, например).

Я могу создать пример скрипки/plunkr для вас, если вы хотите.

Вещь становится все сложнее, если шрифт, который вы используете, не моноширинный, но вы используете тег <pre>, вы должны быть в порядке с этим (если кому интересно, я могу описать нетривиальные, трудоемкие и определенно не-IE-совместимый подход для не моноширинных шрифтов, которые я придумал).

EDIT: На самом деле вы также можете получить положение каретки из прозрачного текстового поля и переместить черный квадрат шириной 1px в правильное положение (для немоноширинных шрифтов). Вы также можете мигать с помощью анимации CSS или Javascript.