How to set focus at the end of a editable div element area that contains other tags

Question

While writing a text, a jQuery script will try and replace from time to time some words.

The text is written within a div tag with content editable set on true.

How can I focus the cursor at the end of the last span child, right before the parent span ?

<div id="cl-edit-outline-title_AtD_div" contenteditable="true">
 <span class="mceItemHidden">
  <span class="hiddenSpellError" pre="">fgsddfsdfgdsfgsd</span>
  <span class="hiddenSpellError" pre="a">a</span>
  <span class="hiddenSpellError" pre="b">b</span>
  &nbsp;
  <span class="hiddenSpellError" pre="c">c</span>
  <span class="hiddenSpellError" pre="d">d</span>
 </span>
</div>

I have searched on the web for solutions, but found none.

fiddle

I created the fiddle with what I have. I searched the web but nothing worked — Ionut Flavius Pogacian, Jun 24 '15 at 09:41
Something like this? http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div — Guy, Jun 24 '15 at 09:43
can you give link to your fiddle so that we can edit and update? — Kunal Pradhan, Jun 24 '15 at 10:44

score 0 · Answer 1 · answered Oct 22 '15 at 19:09

$.fn.focusEnd = function() {
    $(this).focus();
    var tmp = $('<span />').appendTo($(this)),
        node = tmp.get(0),
        range = null,
        sel = null;

    if (document.selection) {
        range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        range = document.createRange();
        range.selectNode(node);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
    tmp.remove();
    return this;
}

To call... $('.yourClassDiv').focusEnd();

enjoy.. ;)

How to set focus at the end of a editable div element area that contains other tags

1 Answers1