DIV CSS 佈局教程網

本文實例講述了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程序設計有所幫助。