javascript - Reposition cursor for a contenteditable div -

i using div implement text box, follows:

<div id="text" contenteditable="true"> 

i add background coloring each of words using span. , using following event.

document.getelementbyid("text").addeventlistener('keyup', function () {     ...     this.innerhtml = output; } 

however, cursor set start of text area each time event triggered. how set cursor after user had entered new letter?

update:

please note changing color , raw text doesn't change cursor position should in same position in if hadn't added keyup event.

please call function div element.

        function placecaretatend(el) {           el.focus();           if (typeof window.getselection != "undefined"                   && typeof document.createrange != "undefined") {             var range = document.createrange();             range.selectnodecontents(el);             range.collapse(false);             var sel = window.getselection();             sel.removeallranges();             sel.addrange(range);           } else if (typeof document.body.createtextrange != "undefined") {             var textrange = document.body.createtextrange();             textrange.movetoelementtext(el);             textrange.collapse(false);             textrange.select();           }         }