关于光标位置,一般是很少用到的,之前也没怎么研究过,只知道可以获取鼠标选中文字的开始位置和结束位置,而且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