TextArea中定位光标位置

简介:

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

TextAreaPosition

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

 

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

 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  

    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>


本文转自Silent Void博客园博客,原文链接:http://www.cnblogs.com/happyhippy/archive/2010/08/06/1794383.html ,如需转载请自行联系原作者
相关文章
|
11月前
span标签显示固定长度显示省略号,光标放上显示全部
span标签显示固定长度显示省略号,光标放上显示全部
147 0
如何获取与设置光标在input框的位置
如何获取与设置光标在input框的位置
如何获取与设置光标在input框的位置
|
2月前
TDesign——Input指定光标插入内容
TDesign——Input指定光标插入内容
30 1
scrollIntoView()定位元素显示导致页面上移解决方法?
scrollIntoView()定位元素显示导致页面上移解决方法?
477 0
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
98 0
|
12月前
|
Web App开发 C++
c++ 实现不在同一程序内,在光标处(当前有焦点的窗体输入框)输入字符
c++ 实现不在同一程序内,在光标处(当前有焦点的窗体输入框)输入字符
|
11月前
textarea去除光标
textarea去除光标
|
11月前
textarea光标初始位置没有在最左上角的问题
textarea光标初始位置没有在最左上角的问题
|
11月前
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
270 0