代码改变世界

JavaScript操控光标，你会么？

2013-04-11 17:15  Barret李靖  阅读(1473)  评论(0)  编辑  收藏  举报

QQ群里经常有人问怎么设置textarea中光标的位置，所见即所得中如果选中文本。如果你也不会，请往下看：

关键词：javascript 光标 位置 鼠标取词 createRange getSelection

 

getPosition

先上代码，你也可以测试下效果。

这是一个Demo~ 
<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>测试</title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    //<![[
       function getPosition() {
            var startPos = endPos = 0;
            var element = document.getElementById("box");
            if( document.selection ) {
                var range  = document.selection.createRange();
                var drange = range.duplicate();
                drange.moveToElementText( element );
                drange.setEndPoint( "EndToEnd", range );
                startPos = drange.text.length - range.text.length;
                endPos   = startPos + range.text.length;
            }else if( window.getSelection ) {
                startPos = element.selectionStart;
                endPos   = element.selectionEnd;
            }
            return {
                "start" : startPos,
                "end"   : endPos
            }
        }

        window.onload = function(){
            var element = document.getElementById("box");

            element.onmouseup = function(){
                var pos = getPosition(),
                    val = element.value.toString();

                console.log(val.substring(pos.start, pos.end) || "没有选中");
            }
        }
    //]]>
    </script>
</head>  

<body>  
    <textarea id="box" style="height:120px;width:200px;padding:8px;">木子Vs立青，性别男，爱好女，单身。</textarea>
</body>  
</html>

 

selection & getSelection

IE下的选择方式：判断方式（document.selection）

//获取选取
var range  = document.selection.createRange();
var drange = range.duplicate();
drange.moveToElementText( element );
drange.setEndPoint( "EndToEnd", range );
//获取position
startPos = drange.text.length - range.text.length;
endPos   = startPos + range.text.length;

比较啰嗦，这代码也没啥意思，看了就忘，所以得多看多写，熟练了就好了。

下面是非IE的选择方式：判断方式（window.getSelection）

startPos = element.selectionStart;
endPos   = element.selectionEnd;

简练多了，是吧~

 

设置光标位置

这个就比较简单了，把 start 和 end 的值设置成一样就搞定了！

chrome下：

element.selectionStart = 5;
element.selectionEnd = 5;
element.focus();

IE下：

var range = document.selection.createRange();
range.collapse(true);
range.moveEnd('character', 5);
range.moveStart('character', 5);
element.focus();

给他们一个focus的目的就是为了聚焦到textarea上去，以便清晰看到光标已经成功设置了。

Demo我就不写了，相信应该有了大概的了解。

 

写个Class，方便使用

chrome下测试没问题，IE下，哎。。搞了半天，还是不兼容 
var getObj = function ( id ) {
    //获取对象
    var ele = document.getElementById(id);
    //返回结果
    return {
        element: ele,
        startPos: 0,
        endPos: 0,
        init: function(){
            var _this = this;
            if( !("__proto__" in {}) ){
                this.element.attachEvent("onmouseup", _this.getPos);
            }else{
                this.element.addEventListener("mouseup", _this.getPos, false);
            }
            return this;
        },
        getPos: function () {
            var _this = this;
            if( document.selection ) {
                try{
                    var range  = document.selection.createRange();
                    var drange = range.duplicate();
                    drange.moveToElementText( _this.element );
                    drange.setEndPoint( "EndToEnd", range );
                    this.startPos = drange.text.length - range.text.length;
                    this.endPos   = this.startPos + range.text.length;
                }catch(e){

                }
            }else if( window.getSelection ){
                try{
                    this.startPos = this.element.selectionStart;
                    this.endPos   = this.element.selectionEnd;
                }catch(e){
                    //throw new Error("getPos error");
                }
            }
            return this;
        },
        setPos: function ( m, n ) {
            var arg2 = n || m;
            if( document.selection ) {
                var range = document.selection.createRange();
                range.collapse(true);
                range.moveEnd('character', arg2);
                range.moveStart('character', m);
                this.element.focus();
            }else if( window.getSelection ){
                this.startPos = this.element.selectionStart = m;
                this.endPos   = this.element.selectionEnd = arg2;
                this.element.focus();
            }
        },
        getStr: function( m, n ){
            this.getPos( m, n );
            return this.element.value.toString().slice(this.startPos, this.endPos);
        }
    };
};

很受伤，下次接着弄。你也可以试试哈~

函数调用方式：

1. 初始化init()

var t = getObj("box").init();

2. setPos()

//选中从m到n之间的内容
t.setPos(m, n);
//一个参数就是设置光标位置
t.setPos(m);

3. getPos()

//这个算是一个内置函数，每次选择都自动调用了，可以不管
t.getPos();

4. getStr()

//获取选中的字符串
t.getStr();

5. invoke()

//执行你送入的函数
function yourFun(){}
//这个方法还没加进去，感觉用处也不大，原理就是使用call
t.invoke(yourFun);

 

主要是不很了解IE的API，纠结了半天，又不愿意去看别人写的文档，先晾在这里，下次不全~

本文未完，待续...