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 最近浏览过的商品的功能实现代码
May 14 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
详解jenkins自动化部署vue
May 14 Javascript
js实现自定义右键菜单
May 18 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
React Fragment介绍与使用详解
Nov 11 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
基于mysql的bbs设计(二)
2006/10/09 PHP
使PHP自定义函数返回多个值
2006/11/26 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Angular路由简单学习
2016/12/26 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python万年历实现代码 含运行结果
2017/05/20 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python操作excel的方法
2018/08/16 Python
python3实现逐字输出的方法
2019/01/23 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
市场营销求职信范文
2014/02/21 职场文书
经济担保书范文
2014/04/02 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
综合测评自我评价
2015/03/06 职场文书
离婚民事起诉状
2015/08/03 职场文书
Python合并pdf文件的工具
2021/07/01 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫