Move the cursor position with Javascript?

caret, contenteditable, javascript

Solution

The code snippet you have is for text inputs and textareas, not `contenteditable` elements.

Provided that all your content is in a single text node and the selection is completely contained within it, the following will work in all major browsers, including IE 6.

Demo: http://jsfiddle.net/9sdrZ/

Code:

function moveCaret(win, charCount) {
    var sel, range;
    if (win.getSelection) {
        // IE9+ and other browsers
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var textNode = sel.focusNode;
            var newOffset = sel.focusOffset + charCount;
            sel.collapse(textNode, Math.min(textNode.length, newOffset));
        }
    } else if ( (sel = win.document.selection) ) {
        // IE <= 8
        if (sel.type != "Control") {
            range = sel.createRange();
            range.move("character", charCount);
            range.select();
        }
    }
}

Problem

I'm looking to move the caret exactly four spaces ahead of its current position so that I can insert a tab properly. I've already got the HTML insertion at the caret's position working, but when I insert the HTML, the caret is left behind. I've spent the past hour or so looking at various ways to do this and I've tried plenty of them, but I can't get any of them to work for me. Here's the most recent method I've tried: ``` function moveCaret(input, distance) { if(input.setSelectionRange) { input.focus(); input.setSelectionRange(distance, distance); } else if(input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd(distance); range.moveStart(distance); range.select(); } } ``` It does absolutely nothing--doesn't move the caret, throw any errors or anything. This leaves me baffled. And yes, I know that the above method set (is supposed to) set the caret at a certain position from the beginning of the specified node (that is, `input`), but even that's not working. So, what exactly am I doing wrong, and how can I do it right? Edit: Based on the links that o.v. provided, I've managed to cobble something together that's finally doing something: throwing an error. Yay! Here's the new code: ``` this.moveCaret = function(distance) { if(that.win.getSelection) { var range = that.win.getSelection().getRangeAt(0); range.setStart(range.startOffset + distance); } else if (that.win.document.selection) { var range = that.win.document.selection.createRange(); range.setStart(range.startOffset + distance); } } ``` Now, this gives the error `Uncaught Error: NOT_FOUND_ERR: DOM Exception 8`. Any ideas why?

Original source

Related problems