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 相关文章推荐
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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 Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
thinkphp分页集成实例
2017/07/24 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
JS中表单的使用小结
2014/01/11 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python中反射用法实例
2015/03/27 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python妙用之编码的转换详解
2017/04/21 Python
python如何实现内容写在图片上
2018/03/23 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Python bisect模块原理及常见实例
2020/06/17 Python
深入了解Python 变量作用域
2020/07/24 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
老师推荐信
2013/10/28 职场文书
企业车辆管理制度
2014/01/24 职场文书
搞笑创意广告语
2014/03/17 职场文书
创业培训计划书
2014/05/03 职场文书
二人合伙经营协议书
2014/09/13 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
运动会广播稿300字
2015/08/19 职场文书