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

Question

I'm trying to program something like a textarea, just for training.

I have a div with (user-generated) text in it:

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

If I click (with left mousebutton) between the two "L" of "Hello", for example, I'd like to see this:

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

How do I achieve this? Until now, I'm doing it with...

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

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

...but, of course, it just adds the cursor at the end of the div.

How can I know where exactly the user clicked, where to add my cursor (or whatever), where to split the text?

Thanks

Edit:

• I do not want to use contenteditable! Just look at it this way: I want to split a string at the mouse-click position.

• I know .append() is not what I'm looking for! .append() was just a Placeholder for a later, better, function. THIS function I'm right now asking for.

• I use a fixed-width font.

Answer 1

this is as close as I could get: 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;
    }
});

I hope it's close enough! :)

NOTE:

this code is written assuming that the font-size is 16px !

I'm afraid you have to calculate the font-size for further expansions.

Answer 2

Note, does not return expected results at firefox ; chrome returns expected results , though cursor may move to either left or right by 1 character , if mouse not released slowly.

 $(function() { $(document).data("text", $("#editor").text()) .on("mousedown", function() { $("#editor") .html($(this) .data("text")) }) .on("mouseup", function() { that = $("#editor"); var sel = window.getSelection ? window.getSelection() : document.selection(); var o = that.text(); var before = sel.baseOffset; var after = o.length - before; var a = o.slice(0, before); var b = after === 0 ? "" : o.slice(-after); var n = "<data>|</data>"; var html = (after === "" ? a + n : a + n + b); that.html(html); }); }) 

 #editor { font-family: Sans; font-size: 28px; letter-spacing: 8px; white-space: pre; } #editor > data { color: red; max-width: .1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div tabindex="0" id="editor">Hello! I am a Text!</div> 

jsfiddle http://jsfiddle.net/guest271314/maakff7q/