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.

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.

• javascript
• jquery
• html
• mouse

• It looks like you want to create your own text-editor. For that you should have a look at html's contenteditable – hffmr Commented Sep 6, 2014 at 14:10
• I know contenteditable, but I'd rather do it without it. I would like to program the functionality of a textarea or a div with contenteditable by myself, that's what it's all about... – WcPc Commented Sep 6, 2014 at 14:20
• what good is append() when you want to change structure of existing html? Use contenteditable since your skills are not enough to do what you are asking – charlietfl Commented Sep 6, 2014 at 14:22
• If you want to do it, you have to experiment a lot... So you can start with the mouse-position via $().click(function (e) {}) and then e.clientX / e.clientY. Then you have to do a bit Maths and pare textlengths (in px; e.g. 'example' => 'e', 'ex', 'exa'...) with the mouseposition. – hffmr Commented Sep 6, 2014 at 14:26
• Can a fixed-width font be assumed? – joews Commented Sep 6, 2014 at 14:32

2 Answers 2

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.

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div tabindex="0" id="editor">Hello! I am a Text!</div>

jsfiddle http://jsfiddle/guest271314/maakff7q/