js获取光标位置

关于光标位置，一般是很少用到的，之前也没怎么研究过，只知道可以获取鼠标选中文字的开始位置和结束位置，而且IE和其他浏览器还不兼容。最近有个需求需要获取光标位置，所以研究了下，至于那个比较坑的项目需求，后期整理出来再写。

1.首先是关于光标位置的问题

光标位置获取，DOM并没有提供这个属性，所以就需要其他方法来间接获取了，我们都知道，在页面中是可以获取选中的文字的，当然对于可编辑区域也是可以的，同时也有相关一些其他属性，比如起始位置和结束位置，我们延伸一下，如果起始位置和结束位置一样呢，这个第一层代表的含义就是我们选了，但是又没选上（这不是废话么），当然如果普通文本的话在页面没什么影响，但是在可编辑区域中我们会发现其实光标放在了起始位置（也是结束位置），所以光标位置就可以这么来获取，要用的就是selection。

2.获取光标的方法

获取光标的方法关键就是selection，但是IE和其他浏览器又不一致，在IE下，selection是在document上的，而其他浏览器是在windows下。直接上代码：

function getCursortPosition (obj) {
    var cursorIndex= 0;
    if (document.selection) {
        // IE Support
        obj.focus ();
        var range= document.selection.createRange();
        range.moveStart ('character', -obj.value.length);
        cursorIndex= range.text.length;
    }else if (obj.selectionStart || obj.selectionStart==0) {
        // another support
        cursorIndex= obj.selectionStart;
    }
    return cursorIndex;
}

在使用过程中发现，如果在可编辑区域发生事件focus时候调用这个方法，得到的返回值永远是0，我测试之后发现，这个时候obj.selectionStart返回的是0，所以是不起作用的，建议给可编辑区域加click事件来触发获取光标。还有一点，就是我测试在IE11下其实是支持obj.selectionStart的。

3.设置光标位置

有了上面的介绍，设置光标位置就很容易了，只需要将selectionStart和selectionEnd设置为一样即可。
具体测试代码看我github:https://github.com/Stevenzwzhai/plugs/tree/master/selection-%E5%8F%AF%E7%BC%96%E8%BE%91%E5%8C%BA%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE