首页 / JAVASCRIPT / js实现的光标位置工具函数示例

js实现的光标位置工具函数示例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js实现的光标位置工具函数示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6428字，纯文字阅读大概需要10分钟。

内容图文

本文实例讲述了js实现的光标位置工具函数。分享给大家供大家参考，具体如下：

这里介绍的一款textarea中光标位置工具函数的例子。

html代码：

<p>文本框：</p>
<textarea name="" id="textarea" cols="30" rows="10">
sASASADASDasfaDFDsfsDFAfdFADf
</textarea>
<button type="button" id="setSelectText">选中特定范围的文本</button>
<button type="button" id="insertAfterText">在光标后插入文本</button>
<br>
<hr>
<br>
<input type="number" name="" id="input">
<button type="button" id="setCurPosBtn">设置光标位置</button>
<br>
<hr>
<br>
<p id="selectText">我是一段可以选中的文字，请打开控制台查看。我是一段可以选中的文字，请打开控制台查看。我是一段可以选中的文字，请打开控制台查看。</p>

js代码：

/**
* 光标位置组件
* ## selectRange对象的方法：
*  （1）selectRange.of(ele)  [创建光标位置获取的新对象]
      参数：
        ele {{JavaScript DOM}} 光标所在的元素，原生JavaScript DOM
*  （2）selectRange.getCurPos()  [获取当前坐标位置]
*  （3）selectRange.setCurPos(pos)  [设置当前光标位置]
      参数：
        pos {{Int}} 当前光标位置
*  （4）selectRange.getSelectText()  [获取选中文字]
*  （5）selectRange.setSelectText(startPos, endPos)  [选中特定范围的文本（只限于textarea和input）]
*      参数：
        startPos {{Int}} 起始位置
        endPos {{Int}} 终点位置
*  （6）selectRange.insertAfterText(value)  [在光标后插入文本]
*      参数：
        value {{String}} 要插入的文本
* 
*
* ## 使用实例：
*    selectRange.of(EleDom).getCurPos(); // 获取当前坐标位置
*    selectRange.of(EleDom).setCurPos(pos); // 设置当前光标位置为pos
*    selectRange.of(EleDom).getSelectText(); // 获取选中文字
*    selectRange.of(EleDom).setSelectText(startPos, endPos); // 选中startPos到endPos范围的文本
*    selectRange.of(EleDom).insertAfterText(value); // 在光标后插入值为value的文本
*/
var selectRange = function(ele){
  this.__element = ele;
};
// 创建光标位置获取的新对象
selectRange.of = function(ele){
  if(ele) {
    return new selectRange(ele);
  } else {
    return {};
  }
};
selectRange.prototype = {
  constructor:selectRange,
  // 获取当前坐标位置
  getCurPos: function() {
    var _this = this,
      textDom = _this.__element;
    // 获取光标位置
    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;
  },
  /**
  * 设置当前光标位置
  * 参数：
  *   pos [Int] 当前光标位置
  */
  setCurPos: function(pos) {
    var _this = this,
      textDom = _this.__element;
    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();
    }
  },
  // 获取选中文字
  getSelectText: function() {
    var _this = this,
      textDom = _this.__element,
      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;
  },
  /**
  * 选中特定范围的文本（只限于textarea和input）
  * 参数：
  *   startPos [Int] 起始位置
  *   endPos [Int] 终点位置
  */
  setSelectText: function(startPos, endPos) {
    var _this = this,
      textDom = _this.__element,
      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();
      }
    }
  },
  /**
  * 在光标后插入文本
  * 参数：
  *   value [String] 要插入的文本
  */
  insertAfterText: function(value) {
    var _this = this,
      textDom = _this.__element,
      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();
    }
  }
};
// ===============================================
// 实例代码
var textareaDom = document.querySelector("#textarea"),
  setCurPosInput = document.querySelector("#input"),
  setCurPosBtn = document.querySelector("#setCurPosBtn"),
  selectText = document.querySelector("#selectText"),
  setSelectTextBtn = document.querySelector("#setSelectText"),
  insertAfterTextBtn = document.querySelector("#insertAfterText");
// 获取当前光标位置
textareaDom.addEventListener("keydown", function() {
  console.log("getCurPos: " + selectRange.of(textareaDom).getCurPos());
}, false);
// 设置当前光标位置
setCurPosBtn.addEventListener("click", function() {
  var curPos = parseInt(setCurPosInput.value);
  console.log("curPos: " + curPos);
  selectRange.of(textareaDom).setCurPos(curPos);
}, false);
// 获取选中文字
selectText.addEventListener("mouseup", function() {
  console.log("selectText: " + selectRange.of(this).getSelectText());
});
// 选中特定范围的文本
setSelectTextBtn.addEventListener("click", function() {
  selectRange.of(textareaDom).setSelectText(0, 21);
}, false);
// 在光标后插入文本
insertAfterTextBtn.addEventListener("click", function() {
  var insertText = "===hello world, I'm insert content.===";
  selectRange.of(textareaDom).insertAfterText(insertText);
}, false);

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的js实现的光标位置工具函数示例全部内容，希望文章能够帮你解决js实现的光标位置工具函数示例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/349259.html

来源：【匿名】

【上一篇】js当前页面登录注册框,固定div,底层阴影的实例代码【下一篇】javascript 怎么调用php方法

更多 ►

【js实现的光标位置工具函数示例】教程文章相关的互联网学习教程文章

JavaScript-hash数组for in 函数【代码】

1什么是数组:内存中，连续存储多个数据的存储空间,再起一个名字为什么;2为什么：现实存储多个相关数据，都是集中存储，共同一个名字3 4 程序=数据结构+算法5好的数据结构可以极大的提高程序的执行效率6何时使用数组，今后只要连续存储多个相关的数据都要用数组7如何使用数组:8 9创建数组：3种 10一.创建空数组 11 1.创建空数组:var arr=[]; 12 2.用new: var arr=new Array(); 1314二.创建数组同时,初始化数组的数据: 15 1.数组直接...

javascript arguments与javascript函数重载【代码】

1.所有的函数都有属于自己的一个arguments对象，它包括了函所要调用的参数。他不是一个数组，如果用typeof arguments，返回的是’object’。虽然我们可以用调用数据的方法来调用arguments。比如length,还有index方法。但是数组的push和pop对象是不适用的。2.函数定义时的参数个数和函数调用时的参数个数没有任何关系。在函数中可以用f.arguments[0]和f.arguments[1]得到调用时传入的第一和第二个参数，arguments不能够创建，是函...

一篇文章把你带入到JavaScript中的闭包与高级函数【代码】【图】

在JavaScript中，函数是一等公民。JavaScript是一门面向对象的编程语言，但是同时也有很多函数式编程的特性，如Lambda表达式，闭包，高阶函数等，函数式编程时一种编程范式。function dada() {var a = 1;var b = function() {console.log(a);}return b // b 就是一个闭包函数，因为它能访问dada函数的作用域 }JavaScript的函数也是对象，可以有属性，可以赋值给一个变量，可以放在数组里作为元素，可以作为其他对象的属性，什么都可...

JavaScript常用方法函数收集【代码】

本文中，收集了一些比较常用的Javascript函数，希望对学习JS的朋友们有所帮助。1. 字符串长度截取function cutstr(str, len) {var temp,icount = 0,patrn = /[^\x00-\xff]/，strre = "";for (var i = 0; i < str.length; i++) {if (icount < len - 1) {temp = str.substr(i, 1);if (patrn.exec(temp) == null) {icount = icount + 1} else {icount = icount + 2}strre += temp} else {break;}}return strre + "..." } 2. 替换全部S...

javascript常用函数大全

javascript函数一共可分为五类： ?常规函数 ?数组函数 ?日期函数 ?数学函数 ?字符串函数 1.常规函数 javascript常规函数包括以下9个函数： (1)alert函数：显示一个警告对话框，包括一个OK按钮。 (2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。 (3)escape函数：将字符转换成Unicode码。 (4)eval函数：计算表达式的结果。 (5)isNaN函数：测试是(true)否(false)不是一个数字。 (6)parseFloat函...

JavaScript - 时间函数【代码】

时间美化函数/* 1、< 60s, 显示为“刚刚” 2、>= 1min && < 60 min, 显示与当前时间差“XX分钟前” 3、>= 60min && < 1day, 显示与当前时间差“今天 XX:XX” 4、>= 1day && < 1year, 显示日期“XX月XX日 XX:XX” 5、>= 1year, 显示具体日期“XXXX年XX月XX日 XX:XX” */function timeFormat(time) {var date = new Date(time),curDate = new Date(),year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate(),ho...

JavaScript创建对象的默认方式:组合使用构造函数模式和原型模式【代码】

由于 JavaScript中没有类，对象充当着一系列集合的模板，包含着属性和方法，而每个对象中也有一个原型对象，可以存放共享方法和属性。创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性 //组合使用构造函数模式(构造函数设置自己的属性)和原型模式(原型设计那些共享的方法和属性)function Person(name,age,job){this.name=name;this.age=a...

JavaScript面向对象编程（8）使用中间函数

上一讲我们提出一个很好的思路，将一个类的可复用部分全部定义在prototype中，这样子类继承的时候可以很方便地通过prototype来继承；但是也带来一个问题就是子类在重写prototype中的属性时会改变所有实例的属性，这是因为父类和子类实例都共享同一个prototype；怎么解决呢？思路就是利用一个中间函数，具体请看代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...

Javascript回调函数

一直一来对回调函数这个概念都很模糊：在JavaScript语言精粹一书中对回调函数的介绍如下：1.函数使得对不连续事件的处理变得更容易。例如，假定有这么一个序列，由用户交互行为触发，向服务器发送请求，最终显示服务器的响应。最自然的写法可能会是这样的：request = prepare_the_request(); response = send_request-synchronously(request); display(response); 2.这种方式的问题在于，网络上的同步请求会导致客户端进入假死状态...

用JavaScript写一个类似PHP print_r的函数【代码】

PHP print_r的函数很好用，网上娱乐城可以用来打印数组、对象等的结构与数据，可惜JavaScript并没有原生提供类似的函数。不过我们可以试着自己来实现这个函数，下面提供一些方法与思路。方法一function print_r(theObj) {var retStr = ‘‘;if (typeof theObj == ‘object‘) {retStr += ‘<div style="font-family:Tahoma; font-size:7pt;">‘;for (var p in theObj) {if (typeof theObj[p] == ‘object‘) {retStr += ‘<div><b>...

javascript中split字符串分割函数【代码】

1、var ss=s.split("fs"); for(var i=0;i<ss.length;i++){ 处理每一个ss[i]; }2、"2:3:4:5".split(":") //将返回["2", "3", "4", "5"] "|a|b|c".split("|") //将返回["", "a", "b", "c"]3、<script type="text/javascript"> var str = "一二三四"; var str1 = "篮球、排球、乒乓球"; var arr = str.split("");//全部分割 var arr1 = str1.split("、");//按照顿号分割 var arr2 = str1.split("、",2);//按照顿号分割,保留两段 </...

javascript函数【代码】

JavaScript 函数语法函数就是包裹在花括号中的代码块，前面使用了关键词 function：function functionname() { 这里是要执行的代码 }当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。调用带参数的函数在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，由逗号 (,) 分隔：myFunction(argu...

【转】JavaScript函数柯里化的一些思考【代码】

原文地址：https://www.cnblogs.com/pengchen/p/5434705.html1. 高阶函数的坑在学习柯里化之前，我们首先来看下面一段代码：var f1 = function(x){return f(x); }; f1(x);很多同学都能看出来，这些写是非常傻的，因为函数f1和f是等效的，我们直接令var f1 = f;就行了，完全没有必要包裹那么一层。但是，下面一段代码就未必能够看得出问题来了:var getServerStuff = function(callback){return ajaxCall(function(json){return call...

javascript 函数声明和函数表达式的区别(学习笔记)【代码】

javascript中声明函数的方法有两种:函数声明式和函数表达式.区别如下:1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而函数表达式可以在...

JavaScript - 函数、对象、事件、字符串（三）【代码】

JS 函数JS 函数是被设计为执行特定任务的代码块JS 函数会在某代码调用它时被执行JS 函数语法JS 函数通过 function 关键词进行定义，其后是函数名和括号()函数名可包含字母、数字、下划线、美元符号（规则与变量名相同）括号内是参数列表，多个参数之间使用逗号分隔：(参数1，参数2，参数3...)由函数执行的代码被放置在花括号中：{...}function functionName(var1,var2,var3,...){//执行代码//return ... } JS 函数调用当事件发生时...

首页 / JAVASCRIPT / js实现的光标位置工具函数示例

js实现的光标位置工具函数示例

内容导读

内容图文

内容总结

内容备注

内容手机端

【js实现的光标位置工具函数示例】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程