js实现的光标位置工具函数示例
作者：kp12345
这篇文章主要介绍了js实现的光标位置工具函数,结合实例形式分析了JavaScript操作textarea文本框光标位置及文本操作相关技巧,需要的朋友可以参考下
本文实例讲述了js实现的光标位置工具函数。分享给大家供大家参考，具体如下：
这里介绍的一款textarea中光标位置工具函数的例子。
html代码：
<p>文本框：</p> <textarea name="" id="textarea" cols="30" rows="10"> sASASADASDasfaDFDsfsDFAfdFADf </textarea> <button type="button" id="setSelectText">选中特定范围的文本</button> <button type="button" id="insertAfterText">在光标后插入文本</button> <br> <hr> <br> <input type="number" name="" id="input"> <button type="button" id="setCurPosBtn">设置光标位置</button> <br> <hr> <br> <p id="selectText">我是一段可以选中的文字，请打开控制台查看。我是一段可以选中的文字，请打开控制台查看。我是一段可以选中的文字，请打开控制台查看。</p>
js代码：
/**
* 光标位置组件
* ## selectRange对象的方法：
* （1）selectRange.of(ele) [创建光标位置获取的新对象]
参数：
ele {{JavaScript DOM}} 光标所在的元素，原生JavaScript DOM
* （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的文本
*/
var selectRange = function(ele){
this.__element = ele;
};
// 创建光标位置获取的新对象
selectRange.of = function(ele){
if(ele) {
return new selectRange(ele);
} else {
return {};
}
};
selectRange.prototype = {
constructor:selectRange,
// 获取当前坐标位置
getCurPos: function() {
var _this = this,
textDom = _this.__element;
// 获取光标位置
var cursorPos = 0;
if (document.selection) {
// IE Support
textDom.focus();
var selectRange = document.selection.createRange();
selectRange.moveStart ('character', -textDom.value.length);
cursorPos = selectRange.text.length;
}else if (textDom.selectionStart || textDom.selectionStart == '0') {
// Firefox support
cursorPos = textDom.selectionStart;
}
return cursorPos;
},
/**
* 设置当前光标位置
* 参数：
* pos [Int] 当前光标位置
*/
setCurPos: function(pos) {
var _this = this,
textDom = _this.__element;
if(textDom.setSelectionRange) {
// IE Support
textDom.focus();
textDom.setSelectionRange(pos, pos);
}else if (textDom.createTextRange) {
// Firefox support
var range = 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) {
// Firefox support
userSelection = window.getSelection();
} else if (document.selection) {
// IE Support
userSelection = document.selection.createRange();
}
if (!(text = userSelection.text)) {
text = userSelection;
}
return text;
},
/**
* 选中特定范围的文本（只限于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){
// IE Support
var range = textDom.createTextRange();
range.moveStart("character",-textLength);
range.moveEnd("character",-textLength);
range.moveStart("character", startPos);
range.moveEnd("character",endPos);
range.select();
}else{
// Firefox support
textDom.setSelectionRange(startPos, endPos);
textDom.focus();
}
}
},
/**
* 在光标后插入文本
* 参数：
* value [String] 要插入的文本
*/
insertAfterText: function(value) {
var _this = this,
textDom = _this.__element,
selectRange;
if (document.selection) {
// IE Support
textDom.focus();
selectRange = document.selection.createRange();
selectRange.text = value;
textDom.focus();
}else if (textDom.selectionStart || textDom.selectionStart == '0') {
// Firefox support
var startPos = textDom.selectionStart;
var endPos = textDom.selectionEnd;
var scrollTop = 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();
}
}
};
// ===============================================
// 实例代码
var textareaDom = 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() {
var curPos = 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() {
var insertText = "===hello world, I'm insert content.===";
selectRange.of(textareaDom).insertAfterText(insertText);
}, false);
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。