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.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
利用python分析access日志的方法
Oct 26 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
tsconfig.json配置详解
May 17 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
htm调用JS代码
2007/03/15 Javascript
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
六行python代码的爱心曲线详解
2019/05/17 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
留学自荐信
2013/10/10 职场文书
教师评语大全
2014/04/28 职场文书
个人委托书如何写
2014/09/25 职场文书
2015年教研组工作总结
2015/05/04 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书