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判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
js实现多图左右切换功能
Aug 04 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
vue a标签点击实现赋值方式
Sep 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 验证登陆类分享
2015/03/13 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
php压缩文件夹最新版
2018/07/18 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python 深入理解yield
2008/09/06 Python
星球大战与Python之间的那些事
2016/01/07 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
运动会入场解说词
2014/02/07 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
讲党性心得体会
2014/09/03 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers