改變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語句會停止chrome拋出一點錯誤：

    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

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

所以，上面的代碼工作正常。

有關參考，請參閱網址： http ： //jsfiddle.net/J72xB/1/

注意：以上代碼在FireFox6，Chrome，IE9中進行了測試。希望這對您有所幫助。 :-)

Answer 2

以下內容改編自我對一個非常相似問題的回答 。 它適用於所有主流瀏覽器，並解決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);
};