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 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
js Calender控件使用详解
Jan 05 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
面包屑导航详解
Dec 07 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue实现滑动解锁功能
Mar 03 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
php 安全过滤函数代码
2011/05/07 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
javascript读取RSS数据
2007/01/20 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
浅谈Python中函数的参数传递
2016/06/21 Python
简单谈谈python的反射机制
2016/06/28 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python写程序统计词频的方法
2019/07/29 Python
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
2014年师德承诺书
2014/05/23 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS