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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
js常用排序实现代码
Dec 28 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
详解jQuery选择器
Dec 21 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
原生JS实现分页
Apr 19 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
electron实现静默打印的示例代码
2019/08/12 Javascript
Python正则表达式分组概念与用法详解
2017/06/24 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
如何保障Web服务器安全
2014/05/05 面试题
do you have any Best Practice for testing
2016/06/04 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
2014年社区植树节活动方案
2014/02/28 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
党风廉正建设责任书
2015/01/29 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python