获取光标的位置

发表于 | 分类于 ，

前段时间写一个MOMO的表情组件，遇到一个问题，即确定当前光标的位置，主要用于textarea跟input中，下面将相关代码罗列如下。

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
32
33
34
35
36
37
38
39
40
41
42
43
(function(){

    var textareaHelper = {
        /**
         * 获取光标的位置
         */
        getPostion : function(node, iePos){
            if(node.setSelectionRange) {
                return node.selectionStart;
            } else if (document.selection) {
                if( iePos === true ){
                    i = node.pos || 0;
                } else {
                    var i, sc = document.selection.createRange(), bc = document.body.createTextRange();
                    bc.moveToElementText(node);
                    for(i = 0; bc.compareEndPoints('StartToStart', sc) < 0 && sc.moveStart('character', -1) !== 0; i++){
                        if(node.value.charAt(i) == '\n'){
                            i++;
                        }
                    }
                }
                return i;
            }
        },
        /**
         * 设置光标的位置
         */
        setPosition : function(textarea, p){
            p = p == 'end' ? textarea.value.length : p;
            if(textarea.setSelectionRange){
                textarea.focus();
                textarea.setSelectionRange(p, p);
            } else if (textarea.createTextRange) {
                var range = textarea.createTextRange();
                range.moveEnd('character', -textarea.value.length);
                range.moveEnd('character', p);
                range.moveEnd('character', p);
                range.select();
            }
        }
    }    

})();