文本框获取焦点时，光标出现在文本末尾

最近遇到一个问题，点击编辑，才能修改一个文本框的内容，文本框自动获取光标，但是光标总是出现在文本框最前面，如图：

光标一直出现在 '1' 的前面，咨询了百度之后，通过 js 来实现：

html 代码：

<input type="text" id="test" value="123456879">
<input type="button" id="focus" value="编辑">

 

js 代码：

$('#focus').on('click', function() {
    var test = document.getElementById('test')
    test.focus();
    moveToEnd(test);    
});
function moveToEnd(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();
    }
} 

'selectionStart' 表示输入性元素selection起点的位置，'selectionEnd' 表示输入性元素selection末点的位置，都是 DOM 属性。

效果如下：

同理 textarea 标签也可以实现上述效果。

 

PS：测试 'selectionStart' 和 'selectionEnd'，例如(html 代码不变)：

$('#focus').on('click', function() {
    var test = document.getElementById('test');
    test.selectionStart = 2;
    test.selectionEnd   = 6;    
});

效果如下：