Изменение значения textarea onclick ставит курсор в странное положение, но только в IE

Question

У меня есть текстовая область, которая при загрузке страницы имеет текст по умолчанию «Список».В фокусе этот текст удален и заменен на «-».Я хотел бы, чтобы позиция каретки была после «-», это работает в chrome, opera, FF и safari, но в IE каретка изначально находится в правильном месте, но затем после небольшой паузы переходит на «-».

Вот код, который я использовал:

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

Я также пытался использовать событие onclick, используя такие трюки, как this.value = this.value после вставки "-", ноничего из этого не работает.Если бы кто-нибудь мог предоставить мне решение этой проблемы, я был бы чрезвычайно благодарен.

Спасибо!

редактировать: ответ Kierans ниже решил проблему, отлично!Оператор if, добавленный в его код, перестает выдавать небольшую ошибку:

    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

Следующее адаптировано из моего ответа на очень похожий вопрос .Он работает во всех основных браузерах и решает проблему в Chrome, которая препятствует расположению каретки в событии focus:

function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

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

    moveCaretToEnd(input);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToEnd(input);
    }, 1);
};

Answer 2

Я попробовал простой фрагмент кода в Firefox, Chrome и IE.Та же проблема, с которой я сталкиваюсь в IE, так что мы можем установить позицию каретки с помощью некоторого фрагмента кода, который выглядит следующим образом:

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

Итак, приведенный выше код работает нормально.

Для справки см.url: http://jsfiddle.net/J72xB/1/

ПРИМЕЧАНИЕ. Вышеуказанный код протестирован в FireFox6, Chrome, IE9.Надеюсь, это поможет вам.: -)