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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
vue实现简单的日历效果
Sep 24 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
react组件基本用法示例小结
Apr 27 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
星际原理概述
2020/03/04 星际争霸
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python实现月食效果实例代码
2019/06/18 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
EJB的几种类型
2012/08/15 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
《颐和园》教学反思
2014/02/26 职场文书
2014年端午节活动方案
2014/03/11 职场文书
认错检讨书
2014/10/02 职场文书
2014年班级工作总结
2014/11/14 职场文书
2014年度培训工作总结
2014/11/27 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
工作简报怎么写
2015/07/21 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
vue项目支付功能代码详解
2022/02/18 Vue.js