js实现的光标位置工具函数示例
本文实例讲述了js实现的光标位置工具函数。分享给大家供大家参考，具体如下：
这里介绍的一款textarea中光标位置工具函数的例子。
html代码：
<p>文本框：</p> <textareaname=""id="textarea"cols="30"rows="10"> sASASADASDasfaDFDsfsDFAfdFADf </textarea> <buttontype="button"id="setSelectText">选中特定范围的文本</button> <buttontype="button"id="insertAfterText">在光标后插入文本</button> <br> <hr> <br> <inputtype="number"name=""id="input"> <buttontype="button"id="setCurPosBtn">设置光标位置</button> <br> <hr> <br> <pid="selectText">我是一段可以选中的文字，请打开控制台查看。我是一段可以选中的文字，请打开控制台查看。我是一段可以选中的文字，请打开控制台查看。</p>
js代码：
/**
*光标位置组件
*##selectRange对象的方法：
*（1）selectRange.of(ele)[创建光标位置获取的新对象]
参数：
ele{{JavaScriptDOM}}光标所在的元素，原生JavaScriptDOM
*（2）selectRange.getCurPos()[获取当前坐标位置]
*（3）selectRange.setCurPos(pos)[设置当前光标位置]
参数：
pos{{Int}}当前光标位置
*（4）selectRange.getSelectText()[获取选中文字]
*（5）selectRange.setSelectText(startPos,endPos)[选中特定范围的文本（只限于textarea和input）]
*参数：
startPos{{Int}}起始位置
endPos{{Int}}终点位置
*（6）selectRange.insertAfterText(value)[在光标后插入文本]
*参数：
value{{String}}要插入的文本
*
*
*##使用实例：
*selectRange.of(EleDom).getCurPos();//获取当前坐标位置
*selectRange.of(EleDom).setCurPos(pos);//设置当前光标位置为pos
*selectRange.of(EleDom).getSelectText();//获取选中文字
*selectRange.of(EleDom).setSelectText(startPos,endPos);//选中startPos到endPos范围的文本
*selectRange.of(EleDom).insertAfterText(value);//在光标后插入值为value的文本
*/
varselectRange=function(ele){
this.__element=ele;
};
//创建光标位置获取的新对象
selectRange.of=function(ele){
if(ele){
returnnewselectRange(ele);
}else{
return{};
}
};
selectRange.prototype={
constructor:selectRange,
//获取当前坐标位置
getCurPos:function(){
var_this=this,
textDom=_this.__element;
//获取光标位置
varcursorPos=0;
if(document.selection){
//IESupport
textDom.focus();
varselectRange=document.selection.createRange();
selectRange.moveStart('character',-textDom.value.length);
cursorPos=selectRange.text.length;
}elseif(textDom.selectionStart||textDom.selectionStart=='0'){
//Firefoxsupport
cursorPos=textDom.selectionStart;
}
returncursorPos;
},
/**
*设置当前光标位置
*参数：
*pos[Int]当前光标位置
*/
setCurPos:function(pos){
var_this=this,
textDom=_this.__element;
if(textDom.setSelectionRange){
//IESupport
textDom.focus();
textDom.setSelectionRange(pos,pos);
}elseif(textDom.createTextRange){
//Firefoxsupport
varrange=textDom.createTextRange();
range.collapse(true);
range.moveEnd('character',pos);
range.moveStart('character',pos);
range.select();
}
},
//获取选中文字
getSelectText:function(){
var_this=this,
textDom=_this.__element,
userSelection,
text="";
if(window.getSelection){
//Firefoxsupport
userSelection=window.getSelection();
}elseif(document.selection){
//IESupport
userSelection=document.selection.createRange();
}
if(!(text=userSelection.text)){
text=userSelection;
}
returntext;
},
/**
*选中特定范围的文本（只限于textarea和input）
*参数：
*startPos[Int]起始位置
*endPos[Int]终点位置
*/
setSelectText:function(startPos,endPos){
var_this=this,
textDom=_this.__element,
startPos=parseInt(startPos),
endPos=parseInt(endPos),
textLength=textDom.value.length;
if(textLength){
if(!startPos){
startPos=0;
}
if(!endPos){
endPos=textLength;
}
if(startPos>textLength){
startPos=textLength;
}
if(endPos>textLength){
endPos=textLength;
}
if(startPos<0){
startPos=textLength+startPos;
}
if(endPos<0){
endPos=textLength+endPos;
}
if(textDom.createTextRange){
//IESupport
varrange=textDom.createTextRange();
range.moveStart("character",-textLength);
range.moveEnd("character",-textLength);
range.moveStart("character",startPos);
range.moveEnd("character",endPos);
range.select();
}else{
//Firefoxsupport
textDom.setSelectionRange(startPos,endPos);
textDom.focus();
}
}
},
/**
*在光标后插入文本
*参数：
*value[String]要插入的文本
*/
insertAfterText:function(value){
var_this=this,
textDom=_this.__element,
selectRange;
if(document.selection){
//IESupport
textDom.focus();
selectRange=document.selection.createRange();
selectRange.text=value;
textDom.focus();
}elseif(textDom.selectionStart||textDom.selectionStart=='0'){
//Firefoxsupport
varstartPos=textDom.selectionStart;
varendPos=textDom.selectionEnd;
varscrollTop=textDom.scrollTop;
textDom.value=textDom.value.substring(0,startPos)+value+textDom.value.substring(endPos,textDom.value.length);
textDom.focus();
textDom.selectionStart=startPos+value.length;
textDom.selectionEnd=startPos+value.length;
textDom.scrollTop=scrollTop;
}
else{
textDom.value+=value;
textDom.focus();
}
}
};
//===============================================
//实例代码
vartextareaDom=document.querySelector("#textarea"),
setCurPosInput=document.querySelector("#input"),
setCurPosBtn=document.querySelector("#setCurPosBtn"),
selectText=document.querySelector("#selectText"),
setSelectTextBtn=document.querySelector("#setSelectText"),
insertAfterTextBtn=document.querySelector("#insertAfterText");
//获取当前光标位置
textareaDom.addEventListener("keydown",function(){
console.log("getCurPos:"+selectRange.of(textareaDom).getCurPos());
},false);
//设置当前光标位置
setCurPosBtn.addEventListener("click",function(){
varcurPos=parseInt(setCurPosInput.value);
console.log("curPos:"+curPos);
selectRange.of(textareaDom).setCurPos(curPos);
},false);
//获取选中文字
selectText.addEventListener("mouseup",function(){
console.log("selectText:"+selectRange.of(this).getSelectText());
});
//选中特定范围的文本
setSelectTextBtn.addEventListener("click",function(){
selectRange.of(textareaDom).setSelectText(0,21);
},false);
//在光标后插入文本
insertAfterTextBtn.addEventListener("click",function(){
varinsertText="===helloworld,I'minsertcontent.===";
selectRange.of(textareaDom).insertAfterText(insertText);
},false);
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。