js实现的光标位置工具函数示例
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了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程序设计有所帮助。
上一篇:JavaScript对象创建模式实例汇总
下一篇:js获取腾讯视频ID的方法
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程