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.
append()
when you want to change structure of existing html? Use contenteditable since your skills are not enough to do what you are asking$().click(function (e) {})
and then e.clientX / e.clientY. Then you have to do a bit Maths and compare textlengths (in px; e.g. 'example' => 'e', 'ex', 'exa'...) with the mouseposition.