如何将闪烁的光标插入 div？答案

【问题标题】：How can I insert a blinking cursor into a div?如何将闪烁的光标插入 div？
【发布时间】：2014-02-15 13:51:21
【问题描述】：

我想使用 angularjs（或纯 JavaScript）制作一个基本的文本编辑器。这个想法是我将有一个 div 来包含文本，而不是使用 textarea。我希望用户能够单击 div 内的任何位置，并在他们单击的位置出现闪烁的光标。我真的不知道该怎么做。有什么建议？顺便说一句，我不想使用contentEditable。

【问题讨论】：

为什么不能 contenteditable？
@MoritzPetersen：他似乎想手动完成，作为编程练习。
@Mortiz 似乎是正确的......并且 contentEditable 似乎是必需的，因为浏览器的编辑功能并没有完全脱离操作系统的理解，即某些东西是数据输入和修改的字段......因此光标作为一个闪烁的 I/O 信号... I/O 是严肃的事情。它不能被模拟或“处理”为 I/O ......要么是 I/O，要么不是。这就是为什么 HTML 如此特别地确定哪些项目是可编辑的。它超越浏览器，进入操作系统/硬件输入/输出。
OP 明确表示他不想使用contenteditable。他想手动完成。因此，这不是重复的，应该重新打开。

标签： javascript angularjs

【解决方案1】：

由于您不喜欢使用contenteditable，因此您可以参考以下建议来手动获取闪烁的光标：

用画布元素覆盖 div，获取点击的位置，并在画布上的该位置为线条设置动画。
覆盖动画.gif，在点击位置包含闪烁线。
使用包含闪烁线的动画.gif 作为 div 的背景，并根据点击的位置设置背景位置。
对于以上两个建议，您可以使用静态图片，而不是 .gif，并切换它。

您必须记住，该行必须捕捉到最近的字符边界，因此您的光标不会在字符中间闪烁。使用等宽字体会更容易。

不过，您仍然需要编写文本字段具有的其他功能：

文本操作。
选择。
复制/粘贴

【讨论】：

【解决方案2】：

您可以通过向 div 元素添加 contentEditable="true" 属性来使 div 可编辑。

<div contentEditable="true"></div>

正如您提到的，您想避免使用 contentEditable，那么您可以使用 Javascript/Jquery 插件。如果您使用插件而不是自己开发它，这对您来说将非常容易。这是一个可以派上用场的jquery插件。 http://www.appelsiini.net/projects/jeditable

【讨论】：

【解决方案3】：

您可以尝试将 div 设置为contenteditable

<div contenteditable>
</div>

JSFiddle

【讨论】：

【解决方案4】：

您似乎正在寻找 html5 contenteditable 属性。

http://html5demos.com/contenteditable

【讨论】：