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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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 MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
python中K-means算法基础知识点
2021/01/25 Python
英国鞋网:Rubber Sole
2020/03/03 全球购物
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
加班费申请报告
2015/05/15 职场文书
导游词之湖北武当山
2019/09/23 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript