javascript获取以及设置光标位置


Posted in Javascript onFebruary 16, 2017

一. 获取光标位置:

// 获取光标位置
function getCursortPosition (textDom) {
 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;
}

二. 设置光标位置:

// 设置光标位置
function setCaretPosition(textDom, pos){
 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();
 }
}

三. 获取选中文字:

// 获取选中文字
function getSelectText() {
 var 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;
}

四. 选中特定范围的文本:

/**
* 选中特定范围的文本
* 参数:
*  textDom [JavaScript DOM String] 当前对象
*  startPos [Int] 起始位置
*  endPos [Int] 终点位置
*/
function setSelectText(textDom, startPos, endPos) {
 var 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();
  }
 }
}

五. 在光标后插入文本:

/**
* 在光标后插入文本
* 参数:
*  textDom [JavaScript DOM String] 当前对象
*  value [String] 要插入的文本
*/
function insertAfterText(textDom, value) {
 var 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();
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 #Javascript
浅谈$_FILES数组为空的原因
Feb 16 #Javascript
原生js实现秒表计时器功能
Feb 16 #Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 #Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 #Javascript
js实现3d悬浮效果
Feb 16 #Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 #Javascript
You might like
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP反射机制用法实例
2014/08/28 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
python super()函数的基本使用
2020/09/10 Python
党员个人对照检查材料
2014/10/01 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
党员发展大会主持词
2015/07/03 职场文书
导游词之峨眉山
2019/12/16 职场文书
python - timeit 时间模块
2021/04/06 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android