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

Question

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

Answer 1

由于您不想使用contenteditable，以下是一些建议，您可以手动查看闪烁的光标：

• 使用canvas元素叠加div，获取单击的位置，并在该位置的画布上设置一条线的动画。
• 在点击位置叠加一个包含闪烁线的动画.gif。
• 使用包含闪烁线的动画.gif作为div的背景，并根据点击的位置设置背景位置。
• 对于上述两项建议，您可以使用静态图片代替.gif，并进行切换。

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

您仍然需要编写文本字段的其他功能，但是：

• 文字处理。
• 选择
• 复制/粘贴

Answer 2

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

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

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

Answer 3

您可以尝试将div设置为contenteditable

<div contenteditable>
</div>

JSFiddle

Answer 4

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

http://html5demos.com/contenteditable