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 js 重置表单 reset()具体实现代码
Aug 05 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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经典的给图片加水印程序
2006/12/06 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
对pandas中Series的map函数详解
2018/07/25 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
品质主管岗位职责
2014/03/16 职场文书
师范生自荐信模板
2014/05/28 职场文书
婚礼家长致辞
2015/07/27 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
装修安全责任协议书
2016/03/22 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python