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

Question

我想用angularjs (或者仅仅是纯javascript)做一个基本的文本编辑器。我的想法是，我将有一个div来包含文本，而不是使用textarea。我希望用户能够在div中的任何地方单击，并在他们单击的地方出现闪烁的光标。我真的不知道该怎么做。有什么建议吗？顺便说一下，我不喜欢使用contentEditable。

Answer 1

由于你不喜欢使用contenteditable，这里有一些建议，你可以看看手动获得一个闪烁的光标：

• 使用画布元素覆盖div，获取单击的位置，并在画布上的该画布上设置一条包含单击位置处闪烁线条的动画.gif。
• 使用包含闪烁线条的动画.gif作为div的背景，并根据单击的位置设置背景位置。
• 对于以上两个建议，您可以使用静态图像，而不是.gif。<代码>H212<代码>F213

你必须记住，这条线必须对齐到最近的字符边界，这样你就不会让光标在字符中间闪烁。使用等宽字体会让这件事变得容易得多。

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

• Text manipulation.
• Selections.
• Copy / pasting

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