TextArea中定位光标位置

朱雀 2021-12-15 12:45 344阅读 0赞

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

[![TextAreaPosition][]][TextAreaPosition 1]

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

最开始，通过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:     οnchange="getPosition(this);calcWeight(this, true);"

6:     οnkeyup="getPosition(this);calcWeight(this);" οnclick="getPosition(this);" οnblur="clearPosition(this);"

7:     ></textarea>

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>

转载于:https://www.cnblogs.com/happyhippy/archive/2010/08/06/1794383.html

[TextAreaPosition]: /images/20211214/bdfb9316285548af9c5dcff2d4f3261c.png
[TextAreaPosition 1]: http://images.cnblogs.com/cnblogs_com/happyhippy/WindowsLiveWriter/TextArea_10A1B/TextAreaPosition_2.jpg

TextArea中定位光标位置

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JS在TextArea光标位置插入文字+移动光标到文字末尾

相关 javascript获取textarea光标选择位置和内容方法(IE, Firefox)

相关修改 EditText 中的光标位置

相关 editView光标的位置定位

相关修改 EditText 中的光标位置

相关 Range - 获取光标位置

相关 textarea在光标位置添加内容

相关 TextArea中定位光标位置

相关定位input的光标，设置光标的位置

相关 js让光标定位在文本的最后位置