javascript - Put caret on end of editable div like twitter does -

http://jsfiddle.net/m45um/

the replacement tag works fine, sets me first position inside editable div then.

how can fix this? , how can trigger event i'm havin caret placed inside tag twitter does?

function replacer(match, p1, p2, p3, offset, string) {     var name = '';     var user = '';     $.each(ar.data, function (i, item) {         var keyword = match.substring(1, (match.length - 1));         if (keyword == item.name) {             user = item.user;             name = item.name;         }     });     return '<a href="/' + user + '">' + name + '</a>'; } $(document).ready(function (e) {     $('body').on('keyup', '#cont', function (e) {         var cont = $('#cont').html();         var cont2 = cont.replace(/\@\w+\s/gi, replacer);         $('#cont').html(cont2);         console.log($('#cont').html());     }); }); var ar = {     "data": [{         "user": "testuser1",             "name": "testname1"     }, {         "user": "testuser2",             "name": "testname2"     }] }; console.log(ar); 

a couple of things before have attempt @ this:

1. please not add elements dom strings - "return ..". you'll have hard time performing other actions node. instead suggest, use dom apis (create/remove/replace/append/etc) perform these functions. suggestion clear read through.

2. you return new string , blindly set html particular string - losing text before it. example: hello name @testuser1 becomes @ - lose "hello name is"

solution:

to take care of carrot placements, have remember selection of user. note - if change html, browser lose selection; hence, need track manually.

before 'replace' text, can selection by:

//ie & others if (window.getselection) {     userselection = window.getselection(); } else if (document.selection) {     userselection = document.selection.createrange(); } selectednode = userselection.anchornode; selectedoffset = userselection.anchoroffset; 

after replace text, need set selection container.

//ie & others   var range,         selection;     if (window.getselection) {         selection = window.getselection();         range = document.createrange();         range.setstart(targetelement, targetoffset);         range.setend(targetelement, targetoffset);         selection.removeallranges();         selection.addrange(range);     } else if (document.selection) {         range = document.selection.createrange();         range.movetoelementtext(targetelement.parentelement);         range.collapse(true);         range.moveend('character', targetoffset);         range.movestart('character', targetoffset);         range.select();     } } 

the target element , target offset node want target , postion (from left) want cursor be.

now basics over, here comes hard part:

• when break text (textnode) putting in anchor element, need have target element anchor element , offset length of text inside anchor element. easier if use dom apis , store element variable.

• you need cater situations user might go part of text , enter @username1; should simple.

you play around rangy js lib achieve this.

have fun!