改变文本区域onclick的值将插入符号置于一个奇怪的位置，但仅在IE中

Question

我有一个文本区域，页面加载时默认文本为"List"。在焦点上，该文本被删除并用"-"代替。我希望插入符号的位置是"-"之后，这适用于chrome, opera, FF和safari，但在IE中插入符号最初是在正确的地方，但之后稍微停顿一下跳转到"-"之前。

下面是我一直在使用的代码:

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

我也尝试过使用onclick事件，在插入"-"后使用this.value = this.value之类的技巧，但这些都不起作用。如果有人能给我提供一个工作环境，我将非常感激。

感谢!

编辑:下面基兰的回答解决了问题，完美!一个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);
};