Question

I have a text area which on page load has default text of “List”. On focus this text is removed and replaced with “-“. I would like the caret position to be after the “-“, this works in chrome, opera, FF and safari but in IE the caret initially is in the correct place, but then after a slight pause jumps to before the “-“.

Here’s the code I’ve been using:

    input.onfocus = function(){
        if(this.value == 'List') {
            this.value = '-';
        }
    }

I have tried using the onclick event as well, using tricks like this.value = this.value after the “-” is inserted but none of this works. If anyone could provide me with a work around I will be extremely grateful.

Thank-you!

edit:
Kierans answer below solved the problem, perfect! An if statement added to his code stops chrome throwing a little error:

    input.onclick = function(){
        if(this.value == 'List') {
            this.value = "-";
            if (this.createTextRange) {
                var range = this.createTextRange();
                var caretPos = this.value.length;
                range.move('character', caretPos);
                range.select();
            }
        }
    }

Answer 1

I tried a simple code snippet in Firefox,Chrome and IE. Same issue i am facing in IE so that we can set the caret position with some code snippet that as follows:

<input type="text" value="List" onfocus="changeValue(this);"/>
function changeValue(e){
    if(e.value == "List"){
            e.value = "-";
           var range = e.createTextRange();
            var caretPos = e.value.length;
            range.move('character', caretPos);
            range.select();
    }
}

So, above code is working fine.

For reference see the url : http://jsfiddle.net/J72xB/1/

NOTE: Above code is tested in FireFox6,Chrome,IE9.Hope this will help you. 🙂