设置输入域(input/textarea)中文本光标的位置

以前记录了一篇将光标定位于输入框最右侧的实现方式，实现光标定位在文本的最末。这种需求往往在修改现有的文本。有时可能还需要把光标定位在首位，或者中间某个位置，这就需要实现一个更通用的方法。

这个方法setCursorPosition需要使用两个原生API

原生JS实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

/* 
 * 设置输入域(input/textarea)光标的位置 
 * @param {HTMLInputElement/HTMLTextAreaElement} elem 
 * @param {Number} index 
 */
function setCursorPosition(elem, index) { 
    var val = elem.value 
    var len = val.length 
  
    // 超过文本长度直接返回 
    if (len < index) return
    setTimeout(function() { 
        elem.focus() 
        if (elem.setSelectionRange) { // 标准浏览器 
            elem.setSelectionRange(index, index)     
        } else { // IE9- 
            var range = elem.createTextRange() 
            range.moveStart("character", -len) 
            range.moveEnd("character", -len) 
            range.moveStart("character", index) 
            range.moveEnd("character", 0) 
            range.select() 
        } 
    }, 10) 
}

jQuery插件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

$.fn.setCursorPosition = function(option) { 
    var settings = $.extend({ 
        index: 0 
    }, option) 
    return this.each(function() { 
        var elem  = this
        var val   = elem.value 
        var len   = val.length 
        var index = settings.index 
  
        // 非input和textarea直接返回 
        var $elem = $(elem) 
        if (!$elem.is('input,textarea')) return
        // 超过文本长度直接返回 
        if (len < index) return
  
        setTimeout(function() { 
            elem.focus() 
            if (elem.setSelectionRange) { // 标准浏览器 
                elem.setSelectionRange(index, index)     
            } else { // IE9- 
                var range = elem.createTextRange() 
                range.moveStart("character", -len) 
                range.moveEnd("character", -len) 
                range.moveStart("character", index) 
                range.moveEnd("character", 0) 
                range.select() 
            } 
        }, 10) 
    }) 
}

线上示例：http://snandy.github.io/lib/func/setCursorPosition.html