<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. 【转】 COCOS2D-X之使用CURL下载图片的一个简单Demo

    #include"curl/curl.h" #pragma  comment(lib,"libcurl_imp.lib") bool HelloWorld::i ...

  2. ubuntu常用快捷键

    1.直接退出窗口  Ctrl + q 2.窗口变大变小  Alt + Q 3.最小化窗口,显示桌面Ctrl + Alt + D 4.把当前窗口移到另一个工作区 Shift+ Ctrl + Alt +方 ...

  3. Spring中的事务管理

    事务简介: 事务管理是企业级应用程序开发中必不可少的技术,用来确保数据的完整性和一致性 事务就是一系列的动作,它们被当作一个单独的工作单元.这些动作要么全部完成,要么全部不起作用 事务的四个关键属性( ...

  4. Entity Framework中的Migration问题

    1.自从用上了Entity Framework(简称EF),妈妈再也不用担心我要写那么复杂的SQL语句了! 这是微软新一代的ORM工具,它能够将数据库的表中的记录映射成为程序中的一个对象,当然也能够将 ...

  5. Android学习过程

    0. Tutorial 1. 基础知识的书 2. 实践为主的书 3. 阅读开源项目 4. 自己做项目 5. 理论为主的书 6. 编程规范和技巧性的书 通过实例了解Android开发 组件:Activi ...

  6. 在cshtml页面中，以‘@’开始的表达式 表示C#语句，会被编译执行

    在原始的Index.html中是正常显示的,然而在现在这个源代码是个cshtml页面: 但是在cshtml页面中,以‘@’开始的表达式 表示C#语句,会被编译执行,会去寻找controller传度给@ ...

  7. 《深入Java虚拟机学习笔记》- 第6章 class文件

    一.class文件内容 Java class文件是对Java程序二进制文件格式的精确定义.每一个Java class文件都对一个Java类或者Java接口作出了全面描述.一个class文件只 能包含一 ...

  8. bug描述注意点

    一个好的错误跟踪系统包括了错误的必要信息,如果做得不好,会造成迷惑,并误导读者.好的故障描述应该包括十个基本部分:标题.项目.所属模块.优先级.重要性.异常等级.可重复性.现象.操作过程和附件. ①标 ...

  9. 【译】 AWK教程指南 1前言

    前面的话: 这几天写了一个程序,在同一个目录里生成了很多文件,需要统计其中部分文件的总大小,发现经常用到的ls.du等命令都无济于事,我甚至都想到了最笨的方法,写一个脚本:mkdir一个新目录,把要统 ...

  10. Python的数据类型的一些知识

    int 类型表示(正负)整数,str 类型表示字符串(Unicode字符序列): 所表示的整数大小只受限于机器内存,而非固定的字节数. 字符串可以用双引号或是单引号封装,需要成对的出现. 传统上,py ...