<html>
<head>
<title>TEST</title>
<style>
body,td {
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 12px;
}
</style>
<script type="text/javascript">
 var start   = 0;
 var end  = 0;
 function add() {
  var textBox   = document.getElementById("ta");
  var pre    = textBox.value.substr(0, start);
  var post      = textBox.value.substr(end);
   textBox.value  = pre + document.getElementById("inputtext").value + post;
 }
 function savePos(textBox) {
  //如果是Firefox(1.5)的话，方法很简单
  if (typeof (textBox.selectionStart) == "number") {
   start = textBox.selectionStart;
   end   = textBox.selectionEnd;
  }
  //下面是IE(6.0)的方法，麻烦得很，还要计算上'\n'
  else if (document.selection) {
   var range = document.selection.createRange();
   if (range.parentElement().id == textBox.id) {
    // create a selection of the whole textarea
    var range_all = document.body.createTextRange();
        range_all.moveToElementText(textBox);
    //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)
    //range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则                 //返回小于0的值，则range_all往右移一点，直到两个range的start相同。
    // calculate selection start point by moving beginning of range_all to beginning of range
    for (start = 0; range_all.compareEndPoints("StartToStart",range) < 0; start++){
     range_all.moveStart('character', 1);
    }
    // get number of line breaks from textarea start to selection start and add them to start
    // 计算一下\n
    for ( var i = 0; i <= start; i++) {
     if (textBox.value.charAt(i) == '\n')
      start++;
    }
    // create a selection of the whole textarea
    var range_all = document.body.createTextRange();
        range_all.moveToElementText(textBox);
    // calculate selection end point by moving beginning of range_all to end of range
    for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end++)
     range_all.moveStart('character', 1);
    // get number of line breaks from textarea start to selection end and add them to end
    for ( var i = 0; i <= end; i++) {
     if (textBox.value.charAt(i) == '\n')
      end++;
    }
   }
  }
  document.getElementById("startId").value  = start;
  document.getElementById("endId").value      = end;
 }
</script>
</head>
<body>
 <form action="a.cgi">
  <table border="1" cellspacing="0" cellpadding="0">
   <tr>
    <td>start: <input type="text" id="startId" size="3" /></td>
    <td>end:   <input type="text" id="endId" size="3" /></td>
   </tr>
   <tr>
    <td colspan="2"><textarea id="ta" onKeydown="savePos(this)"
      onKeyup="savePos(this)" onmousedown="savePos(this)"
      onmouseup="savePos(this)" onfocus="savePos(this)" rows="14"
      cols="50"></textarea></td>
   </tr>
   <tr>
    <td><input type="text" id="inputtext" /></td>
    <td><input type="button" onClick="add()" value="Add Text" /></td>
   </tr>
  </table>
 </form>
</body>
</html>

js获取光标位置例子的更多相关文章

  1. js获取光标位置

    js获取光标位置   var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...

  2. js获取光标位置并插入内容

    先来几个网上找的参考资源,我爱互联网,互联网使我变得更加强大. https://blog.csdn.net/mafan121/article/details/78519348 详细篇,该作者很用心的解 ...

  3. android EditText获取光标位置并安插字符删除字符

    android EditText获取光标位置并插入字符删除字符1.获取光标位置int index = editText.getSelectionStart(); 2.在光标处插入字符int index ...

  4. Android EditText获取光标位置并插入字符删除字符

    1.获取光标位置 int index = editText.getSelectionStart(); 2.在光标处插入字符 int index = editText.getSelectionStart ...

  5. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  6. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  7. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

  8. js 在光标位置插入内容

    原文:https://blog.csdn.net/smartsmile2012/article/details/53642082 createDocumentFragment()用法: https:/ ...

  9. 文本框获取光标位置 ---- ctrl+enter换行

    业务需求:按下enter键发送信息,按下ctrl+enter键换行 下面代码是网上找的资料 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

随机推荐

  1. WCF 学习总结2 -- 配置WCF

    前面一篇文章<WCF 学习总结1 -- 简单实例>一股脑儿展示了几种WCF部署方式,其中配置文件(App.config/Web.config)都是IDE自动生成,省去了我们不少功夫.现在回 ...

  2. HDU 5317 RGCDQ

    题意:f(i)表示i的质因子个数,给l和r,问在这一区间内f(i)之间任意两个数最大的最大公倍数是多少. 解法:先用筛法筛素数,在这个过程中计算f(i),因为f(i)不会超过7,所以用一个二维数组统计 ...

  3. HDU 3007 Buried memory & ZOJ 1450 Minimal Circle

    题意:给出n个点,求最小包围圆. 解法:这两天一直在学这个神奇的随机增量算法……看了这个http://soft.cs.tsinghua.edu.cn/blog/?q=node/1066之后自己写了好久 ...

  4. 【树莓PI】下载机

    sudo app-get install ntfs-3g  读写ntfs格式的磁盘 mount -t ntfs /dev/sda4 /mnt/usb -o nls=utf8,umask=0 fdisk ...

  5. Zabbix探索：Agent配置中Hostname错误引起的Agent.Ping报错

    搭好了Zabbix_Server以后,添加了服务器本身和一台Windows的机器做测试,居然有这样的报警. Zabbix agent on zabbix_client is unreachable f ...

  6. ZeroR-baseline分类器

    ZeroR分类器是一种最简单的分类器,这种方法仅仅根据历史数据统计规律,而选择一种概率最大的类别作为未知样本的分类结果,也就是说对于任意一个未知样本,分类结果都是一样的.ZeroR分类器简单的以多数类 ...

  7. Node与Express开发 坑1

    添加 app.set('views', __dirname + '/views') 修改 app.use(express.static(__dirname + '/public')); express ...

  8. SQL注入攻击及防范

    一．什么是SQL注入1．SQL注入的定义     SQL注入(SQL Injection) 利用了程序中的SQL的漏洞,进行攻击的方法. 2．SQL注入举例  1)利用SQL语法错误获取数据库表的结构 ...

  9. [学姿势]使用AngularJS+CodeIgniter框架经验谈

    这篇文章作为总结总结7月份参与项目时遇到的新东西和问题,包括这两个框架(CodeIgniter.AngularJS)以及两个功能实现.有前端调试显示动态认证,也有用php实现功能模块. 1.添加设备 ...

  10. Spring配置文件的加载，及装载多个beans.xml文件

    applicationContext.xml 是spring的全局配置文件,用来控制srping的特性 1  手动加载自定义的beans.xml文件 @Test public void testAut ...