原文:TextArea中定位光标位置

在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用“+”号来作为明细分隔符:1+1.5+2+3.4),如下图所示:

为了让输入更直观,需要在输入过程中,实时地显示汇总数量和合计;如果用户希望编辑文本中间的某条明细,也可以通过鼠标点击、或者键盘上的上下左右键来定位某个明细,并在页面上提示光标的焦点位置。

最开始,通过windows.event.x、windows.event.y、windows.event.clientX、windows.event.clientY来获取光标位置;在测试过程中发现,鼠标点击的时候可以取到正确的位置,但一旦把鼠标移走,或者用上下左右键移动光标,就无法定位光标的位置了。

   1:  
   2:     function getPosition(input)
   3:     {
   4:         var rng = event.srcElement.createTextRange(); 
   5:         rng.collapse(true);
   6:         rng.moveToPoint(window.event.clientX, window.event.clientY);
   7:         rng.moveStart("character", -input.value.length);
   8:  
   9:         var a = [];
  10:         rng.text.replace(/\+/g, function($0) { a.push($0); });
  11:         document.getElementById("position").innerHTML = "第:" + (a.length + 1) + "条明细";
  12:     }

windows.event.x/y/clientX/clientY,取得的是事件触发时,鼠标的位置,不是文本框中光标的位置,所以这段代码无法定位文本框中光标的位置。

网上搜了下,找到另外一种实现方式,测试代码如下:

   1: <span id="stat">数量:0, 合计:0</span>
   2: <span style="width:20px"></span>
   3: <span id="position"></span><br />
   4: <textarea ID="tbxWeightDetail" style="width:250px" width="250px" runat="server" TextMode="MultiLine" 
   5:     onchange="getPosition(this);calcWeight(this, true);" 
   6:     onkeyup="getPosition(this);calcWeight(this);" onclick="getPosition(this);" onblur="clearPosition(this);"
   7:     ></textarea>
   8:  
   9: <script>
  10:     function calcWeight(input, c)
  11:     {
  12:         var a = [];
  13:         input.value.replace(/\d+([\.]\d+){0,1}/g, function($0) { a.push($0); });
  14:         var sum = eval(a.join("+")) || 0;
  15:         document.getElementById("stat").innerHTML = "数量:" + a.length + ", 合计:" + sum.toFixed(2);
  16:         if (c)
  17:         {
  18:             input.value = a.join("+");
  19:         }
  20:     }
  21:  
  22:     calcWeight(document.getElementById("tbxWeightDetail"));
  23:  
  24:     function getPosition(input)
  25:     {
  26:         var rng = event.srcElement.createTextRange();
  27:         var length = 0;//设置初始位置
  28:         input.focus();
  29:         var scrollPosition = input.scrollTop;//获得滚动条的位置  
  30:         var selectedRange = document.selection.createRange();//创建文档选择对象
  31:         rng.collapse(true);
  32:         rng.select();
  33:         var j = document.selection.createRange();//为新的光标位置创建文档选择对象
  34:         selectedRange.setEndPoint("StartToStart",j);//在以前的文档选择对象和新的对象之间创建对象
  35:         var str = selectedRange.text;//获得对象的文本
  36:         var re = new RegExp("[\\n]","g");
  37:         str = str.replace(re,"");//过滤  
  38:         length = str.length;//获得长度.也就是光标的位置  
  39:         selectedRange.collapse(false);  
  40:         selectedRange.select();//把光标恢复到以前的位置
  41:         input.scrollTop = scrollPosition;//把滚动条恢复到以前的位置
  42:  
  43:         var a = [];
  44:         str.replace(/\+/g, function($0) { a.push($0); });
  45:         document.getElementById("position").innerHTML = "第" + (a.length + 1) + "个明细";
  46:     }
  47:  
  48:     function clearPosition(input)
  49:     {
  50:         document.getElementById("position").innerHTML = "";
  51:     }
  52: </script>

TextArea中定位光标位置的更多相关文章

  1. android中定位光标位置

    edittext.setSelection(int); edittext.setText(123);//设置edittext中的内容 edittext.setSelection(123.length( ...

  2. js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)

    一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入 ...

  3. Linux初识之Centos7中terminal光标位置偏移问题的解决

    新安装的centos7打开terminal发现光标位置向右偏移,使用起来影响感官,经查询后找到类似情况并顺利解决问题,特记录解决过程以作参考. 1.未解决时光标向右偏移显示: 2.打开设置(Setti ...

  4. 设置输入域(input/textarea)中文本光标的位置

    以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...

  5. shell 字符串中定位字符位置 获取字符位置

    linux shell 字符串操作(长度,查找,替换)详解 该博文中描述的如下两个字符串操作, ${string:position} #在$string中, 从位置$position开始提取子串 ${ ...

  6. JS在可编辑的div中的光标位置插入内容或表情

    <input type="button" value="插入字符" onclick="document.getElementById('test ...

  7. 用JQuery获取输入框中的光标位置

    (function ($, undefined) { $.fn.getCursorPosition = function () { var el = $(this).get(0); var pos = ...

  8. windows.h头文件中改变光标位置的函数——SetConsoleCursorPosition

    COORD 具体为 typedef struct COORD{ short X; short Y; } COORD,*PCOORD;     可以用来记录坐标. #include <iostre ...

  9. 獲取 Textarea 的光標位置(摘自網絡)

    在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的.下面我们一起来看看如何获取到 Textarea 元素中的光标位置.首先,我们用 rang ...

随机推荐

  1. Cocos2d-X中实现批处理精灵

    使用普通方法实现批处理精灵 在Sprite.h中加入以下的代码 #ifndef __Sprite_SCENE_H__ #define __Sprite_SCENE_H__ #include " ...

  2. 基于最简单的FFmpeg采样读取内存读写:内存玩家

    ===================================================== 基于最简单的FFmpeg样品系列读写内存列表: 最简单的基于FFmpeg的内存读写的样例:内 ...

  3. (四)左右ng-app自己主动bootstrap相框

    博客之前 (三)ng-app的使用困惑和angularJS框架的自己主动载入 提出了使用ng-app指令的情况.之前认为出现第4和第5种情况非常奇怪,由于仅仅看到了现象,没有看到本质.JS错误.最直观 ...

  4. mod_wsgi + pymssql通路SQL Server座

    靠pymssql通路SQL Server时刻,直接地python没有问题的执行.靠mod_wsgi和Apache当部署.所有请求被发现hang然后数据库查询. 通过google查到了答案,感谢goog ...

  5. 【剑指offer】最小的k的数量

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/26966159 题目描写叙述: 输入n个整数,找出当中最小的K个数.比如输入4,5,1,6, ...

  6. TestNg它@Factory详细解释------如何更改参数值测试

    原创文章,版权所有所有.转载,归因:http://blog.csdn.net/wanghantong TestNg的@Factory注解从字面意思上来讲就是採用工厂的方法来创建測试数据并配合完毕測试 ...

  7. [SignalR]异常信息捕获以及处理

    原文:[SignalR]异常信息捕获以及处理 异常处理,一般采用try..catch方式处理,而signalR里面有HubPipelineModule类可以捕获到Hub内发生的异常信息. 从上图中,可 ...

  8. SSH-Struts(两)—调节器(ActionServlet)

    第一部分介绍的博客Struts架构,下一节介绍中特定成分,这个博客是写Struts控制器ActionServlet. 扮演的角色 ActionServlet类是Struts的控制中心,全部来自于浏览器 ...

  9. zoj 3829 Known Notation(2014在牡丹江区域赛k称号)

    Known Notation Time Limit: 2 Seconds      Memory Limit: 131072 KB Do you know reverse Polish notatio ...

  10. 在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table)

    原文:在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table) 打印指定内容: <html> <head> <script   type= " ...