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


Posted in Javascript onOctober 03, 2016

本文实例讲述了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 相关文章推荐
jquery.tmpl JQuery模板插件
Oct 10 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
js获取腾讯视频ID的方法
Oct 03 #Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 #Javascript
微信小程序 navigation API实例详解
Oct 02 #Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 #Javascript
微信小程序 location API实例详解
Oct 02 #Javascript
微信小程序 Storage API实例详解
Oct 02 #Javascript
微信小程序 Video API实例详解
Oct 02 #Javascript
You might like
PHP中文竖排转换实现方法
2015/10/23 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
Script的加载方法小结
2011/01/12 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
Django实现组合搜索的方法示例
2018/01/23 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Python的log日志功能及设置方法
2019/07/11 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python isinstance函数用法详解
2020/02/13 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
django 模版关闭转义方式
2020/05/14 Python
C#如何进行LDAP用户校验
2012/11/21 面试题
网络技术专业求职信
2014/07/13 职场文书
求职自我推荐信
2015/03/24 职场文书
销售会议开幕词
2016/03/04 职场文书
用python画城市轮播地图
2021/05/28 Python