小编WcP*_*cPc的帖子

我正在尝试编写类似textarea的东西,仅用于训练.

我有一个带有(用户生成的)文本的div:

<div id="editor">Hello! I am a Text!</div>

例如,如果我在"Hello"的两个"L"之间单击(使用鼠标左键),我希望看到:

<div id="editor">Hel<div id="cursor">|</div>lo! I am a Text!</div>

我该如何实现这一目标？到现在为止,我正在做...

//HTML
<div id="editor" onclick="setCursorWithMouse()"><!-- User-Text --></div>

//jQuery
function setCursorWithMouse(){
    $('#editor').append('<div id="cursor">|</div>');
}

...但是,当然,它只是将光标添加到div的末尾.

如何知道用户点击的确切位置,添加光标(或其他)的位置,文本分割位置？

谢谢

编辑:

• 我不想用contenteditable!只需这样看:我想在鼠标点击位置拆分一个字符串.

• 我知道.append()不是我想要的!.append()只是一个占位符,用于以后更好的功能.这个功能我现在正在要求.

• 我使用固定宽度的字体.