本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
