<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. 【转】如何下载并编译Android4.0内核源码goldfish(图文)

    原文网址:http://blog.csdn.net/flydream0/article/details/7070392 关于如何下载Android4.0源码,请查看我的博客内另一篇文章(同样是图文教程 ...

  2. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.5.10

    Every $k\times k$ positive matrix $A=(a_{ij})$ can be realised as a Gram matrix, i.e., vectors $x_j$ ...

  3. visual studio 中使用git

    原文链接:http://my.oschina.net/gal/blog/141442 osc终于全面开放git库了,这是我一直期待的事,也是促使我从CSDN转回OSC社区的重要原因之一.而这次我来教大 ...

  4. javascript设计模式5

    子类引用父类 function extend(subClass,superClass){ var F=function(){}; F.prototype=superClass.prototype; s ...

  5. sqlite 修改表名，合并数据库(文件)

    修改表名:ALTER TABLE orig_table_name RENAME TO tmp_table_name; 将某个数据库的一个表的数据插入到另一个数据库的某个表里:1.先连接数据库A2.再a ...

  6. adb不响应

    1.CMD命令窗口输入:adb nodaemon server .然后就会提示你哪个端口被占用了. 2.输入netstat -ano | findstr "5037" .然后会弹出 ...

  7. 异步网页采集利器CasperJs

    在采集网页中,我们会经常遇到采集一些异步加载页面的网页,我们通常用的httpwebrequest类就采集不到了,这个时候我们通常会采用webbrowser来辅助采集,但是.net下自带的webbrow ...

  8. HDU 1018 Big Number

    LINK:HDU 1018 题意:求n!的位数~ 由于n!最后得到的数是十进制,故对于一个十进制数,求其位数可以对该数取其10的对数,最后再加1~ 易知:n!=n*(n-1)*(n-2)*...... ...

  9. Intent简介

    1 Intent概念 1.1 Intent的作用 指明Intent所要启动的对象 提供将要启动对象组件运行需要的数据 组件类型 启动方法 Activity startActivity(Intent i ...

  10. SQL连接查询的方式

    网上copy,以后来完整 连接条件可在FROM或WHERE子句中指定,建议在FROM子句中指定连接条件.WHERE和HAVING子句也可以包含搜索条件,以进一步筛选连接条件所选的行.          ...