jQuery:在鼠标单击位置拆分文本

Question

我正在尝试编写类似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()只是一个占位符,用于以后更好的功能.这个功能我现在正在要求.

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

Answer 1

这是我能得到的:DEMO

var clicked=false;
$('#editor').click(function(e){
    $(this).addClass('active');
    var letterWidth=7;
    $('#editor span').remove();
    var clickPos=e.pageX-$(this).offset().left;
    if(!clicked) clickPos+letterWidth;
    var letter=Math.round(clickPos/letterWidth);
    var before=$(this).html().substr(0,letter);
    var after=$(this).html().substr(letter,$(this).html().length);
    $(this).html(before+'<span>|</span>'+after);
    clicked=true;
});
$(document).click(function(e){
    if(!$('#editor').is(e.target)){
        $('#editor').removeClass('active');
        $('#editor span').remove();
        clicked=false;
    }
});

我希望它足够接近!:)

注意:

这个代码编写假设font-size是16px!

我担心你必须计算font-size进一步的扩展.