views:

1808

answers:

4

Hi I need to move caret to end of 'contenteditable' node like on gmail notes widget

i read threads on stackoverflow, but that solutions use input's and doesn't work with content editable

+1  A: 

This seems to work for me. It moves the caret to the end of the textarea.

function setCaret()
{
    ctrl = document.getElementById('txt1');
    pos = ctrl.value.length;
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}
geowa4
Thak you. It working
avsej
Thats a `textarea` and not an arbitrary element with `contentEditable=true`. Do you have a solution for the later?
panzi
@panzi: see my solution for contenteditable elements.
Nico Burns
A: 

Do you have a way to make this work in chrome?

Jason
geowa4's solution will work for textarea's in chrome, it will not work for contenteditable elements in any browser. mine works for contenteditable elements, but not for textareas.
Nico Burns
A: 

Doesn't seem to work using a contenteditable object.

geowa4's solution will work for textarea's, mine works for contenteditable elements.
Nico Burns
+1  A: 

Geowa4's solution will work for a textarea, but not for a contenteditable element.

This solution is for moving the caret to the end of a contenteditable element. It should work in all browsers which support contenteditable.

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}

It can be used by code similar to:

elem = document.getElementById('txt1')//This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);
Nico Burns