如何为输入文本创建光标？

Question

我正在创建一个网络游戏，用户在屏幕上键入 HTML 代码，另一个则显示代码结果，并且我正在尝试为输入区域创建光标。它具有眨眼动画，并且必须随着用户键入内容而移动。版本屏幕如下：

我认为更改输入的默认光标非常困难，因此我搜索了创建正方形，但是无法使用光标移动它。所以我需要的是：

• 页面在加载时需要将光标置于输入上（用户无需单击它）。
• 在输入光标之后创建一个更大的光标
• 使输入大小动态。它的大小需要随着用户类型的增长而增加（我认为这是使光标移动的更好方法）

在此项目中，我正在使用 AngularJS 。我遇到的一个问题是：输入时，输入文本也向左移动，因此我需要使输入向右增加。