本文实例讲述了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程序设计有所帮助。
标签:
js,光标位置,工具函数
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“js实现的光标位置工具函数示例”评论...
更新日志
2025年10月27日
2025年10月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]