js实现的光标位置工具函数示例

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • Javascript实现获取及设置光标位置的方法

    本文实例讲述了Javascript实现获取及设置光标位置的方法.分享给大家供大家参考.具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE.Firefox.Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数. 1. 获取光标位置函数: function getCursortPosition (ctrl) { var CaretPos = 0; // IE

  • js获取光标位置和设置文本框光标位置示例代码

    复制代码 代码如下: <script type="text/javascript">        function getTxt1CursorPosition(){            var oTxt1 = document.getElementById("txt1");            var cursurPosition=-1;            if(oTxt1.selectionStart){//非IE浏览器           

  • JavaScript 获取/设置光标位置,兼容Input&&TextArea

    JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px

  • JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    =IE支持document.selection =Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性 复制代码 代码如下: function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart

  • 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码

    用javascript获取鼠标位置: 复制代码 代码如下: function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - docu

  • javascript控制在光标位置插入文字适合表情的插入

    直接上代码吧,用js控制在光标位置插入. 在实现表情的插入时用到了. 复制代码 代码如下: <span style="font-size:18px;"><html> <head> <script type='text/javascript'> function test(str){ var tc = document.getElementById("mytextarea"); var tclen = tc.value.

  • textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)

    更简单的在光标处插入文字 先在本文框中点鼠标以确定光标位置. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 需要注意的是document.selection.createRange是IE独有的 而firefox也有独有的一套 复制代码 代码如下: var $obj = document.getElementById("words"); var selstart = $obj.selectionStart; //文字浮标选择的开始位置 var selend = $obj.s

  • javascript获得光标所在的文本框(text/textarea)中的位置

    js获得光标所在的文本框(text/textarea)中的位置 function getPosition(obj){ var result = 0; if(obj.selectionStart){ //IE以外 result = obj.selectionStart }else{ //IE var rng; if(obj.tagName == "textarea"){ //TEXTAREA rng = event.srcElement.createTextRange(); rng.mo

  • 用javascript获取textarea中的光标位置

    对于写javascript写网页编辑器的人来说,获取textarea中的光标位置是一个非常重要的问题,而往往很多人在这个地方不知所措,找不到好的办法.昨天我在网上找到了一段javascript代码,本来不想把原版放在这里的,就是因为太精彩了,怕我给改坏了,所以还是原版放在这里吧. var start=0;     var end=0;     function add(){                var textBox = document.getElementById("ta"

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • 往光标所在位置插入值的js代码

    复制代码 代码如下: <pre name="code" class="javascript">/** *往输入域中插入字符串(光标所在位置) *@param $t document.getElementById('fieldId') *@param myValue 要插入的值 ** function addSplitToField($t,myValue){ if (document.selection) { $t.focus(); sel = docum

随机推荐