JS光标处理以及返回光标的下一个字符方法介绍

该文暂时只针对IE，非IE的暂时没考虑。

参考：

http://www.planabc.net/2010/11/17/get_textarea_cursor_position/

http://www.cnblogs.com/opencoder/articles/1459010.html

http://www.jb51.net/article/23690.htm

http://www.3lian.com/edu/2014/01-10/123085.html

针对可编辑div:

该js方法获取光标的下一个字符

function getDivChar(div){//获取光标后一个字符
if (document.selection) {
var range = document.selection.createRange(); //获取光标选中区域，
var range_all = document.body.createTextRange(); 
range_all.moveToElementText(div); //获取整个实体文本区域(create a selection of the whole div)

//如果双击时，本来就有选中文本，就不理
if(range_all.compareEndPoints("StartToStart",range) >= 0){
return;
}
//两个range，一个是已经选择的text(range)，一个是整个div(range_all)    
//range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则 返回小于0的值，则range_all往右移一点，直到两个range的start相同。    
// calculate selection start point by moving beginning of range_all to beginning of range    
range_all.setEndPoint("StartToStart",range);   //将整个文本区域的光标左端移动到选中区域的左端
//for (var start = 0; range_all.compareEndPoints("StartToStart",range) < 0; start++){  //直到移动到选中区域处
// range_all.moveStart('character', 1);
//}

//if(start == 0){  //有选中文本的双击不理
// return "0";
//}

return range_all.text.charAt(0);  //返回光标处的下一个字符
}
}

比如整个div的文本是123456789，而我们这个光标先选中456这三个数字，那么

var range = document.selection.createRange(); //获取光标选中区域，如果没有选中区域，只有光标，那选中区域文本为空

range区域为456

以下这个是获取整个div的区域。

var range_all = document.body.createTextRange(); 
range_all.moveToElementText(div); //获取整个实体文本区域(create a selection of the whole div)

range_all区域为123456789

range_all.compareEndPoints("StartToStart",range)   compareEndPoints这个方法 

整个div文本区域跟选中文本区域的左端点比较，如果是整个div区域左端点在选中区域左端点左边，则返回-1，如果相等，返回0，如果在右边，返回1

这个方法可以判断两个文本区域哪个在左，哪个在右。

1在4的左边，所以返回-1

range_all.setEndPoint("StartToStart",range);   setEndPoint这个方法将整个文本区域的光标左端移动到选中区域的左端

那么range_all的文本区域变为了456789，实际就是光标移动到文本区域左侧

range_all.text.charAt(0);那么就返回了光标的下一个字符

range.moveStart("character", n);    //光标左端位置向前移动n位，-n则表示向后移动n位
range.moveEnd("character", n);   //光标右端位置向前移动n位，-n则表示向后移动n位