Question

172

Move the cursor position with Javascript?

rated 0 times [ 175] [ 3] / answers: 1 / hits: 34972 / 12 Years ago, mon, may 28, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

raymondorlandok

Add To Favorites

Follow

Total Points: 530

Total Questions: 110

Total Answers: 96

Location: Lebanon

Member since Wed, Dec 21, 2022

1 Year ago

answered 12 Years ago lidialyrick · Accepted Answer

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();

        }

    }

}