<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. 解决java.lang.NoClassDefFoundError: org/apache/log4j/Level

    现象: java.lang.NoClassDefFoundError: org/apache/log4j/Level at org.slf4j.LoggerFactory.getSingleton(L ...

  2. springmvc入门基础之注解和参数传递

    一.SpringMVC注解入门 1. 创建web项目2. 在springmvc的配置文件中指定注解驱动,配置扫描器 <!-- mvc的注解驱动 --> <mvc:annotation ...

  3. xbz分组题B 吉利数字 数位dp入门

    B吉利数字时限:1s [题目描述]算卦大湿biboyouyun最近得出一个神奇的结论,如果一个数字,它的各个数位相加能够被10整除,则称它为吉利数.现在叫你计算某个区间内有多少个吉利数字. [输入]第 ...

  4. 使用Aspose.Cell控件实现Excel高难度报表的生成（一）

    时光飞逝,生活.工作.业余研究总是在不停忙碌着,转眼快到月底,该月的博客文章任务未完,停顿回忆一下,总结一些经验以及好的东西出来,大家一起分享一下.本文章主要介绍报表的生成,基于Aspose.Cell ...

  5. logback日志文件需要注意点

    1.支持的jar包 logback-access-1.1.1.jarlogback-classic-1.1.1.jarlogback-core-1.1.1.jar 2.logback.xml文件,we ...

  6. sql 嵌套事务学习笔记

    以下内容根据此官方文档修改:http://technet.microsoft.com/zh-cn/library/ms189336(v=sql.105).aspx 嵌套事务的使用场景或者说目的主要是为 ...

  7. POj3421 X-factor Chains(质因数分解+排列组合)

    POj3421X-factor Chains 一开始没读懂题意,不太明白 Xi | Xi+1 where a | b means a perfectly divides into b的意思,后来才发现 ...

  8. python特征提取——pyAudioAnalysis工具包

    作者:桂. 时间:2017-05-04  18:31:09 链接:http://www.cnblogs.com/xingshansi/p/6806637.html 前言 语音识别等应用离不开音频特征的 ...

  9. HTML学习笔记之三（localstorage的使用）

    localstorage的使用 1.获取对象 var localstroage = window.localStorage; 2.存储值 localstroage.setItem('openid',' ...

  10. 003_JS基础_面向对象基础

    3.1 对象   引入:在js中表示一个人的信息(name, gender, age)通过var申明三个变量,但是这样使用基本数据类型的变量,他们是互相独立的,没有联系:  此时就需要使用对象,对象是 ...