在項(xiàng)目中，遇到一個(gè)場景：希望能在TextArea中輸入某條記錄中的明細(xì)(明細(xì)較簡單，沒有附屬信息，只用記錄順序和值即可，譬如用“+”號(hào)來作為明細(xì)分隔符：1+1.5+2+3.4)，如下圖所示：
為了讓輸入更直觀，需要在輸入過程中，實(shí)時(shí)地顯示匯總數(shù)量和合計(jì)；如果用戶希望編輯文本中間的某條明細(xì)，也可以通過鼠標(biāo)點(diǎn)擊、或者鍵盤上的上下左右鍵來定位某個(gè)明細(xì)，并在頁面上提示光標(biāo)的焦點(diǎn)位置。
最開始，通過windows.event.x、windows.event.y、windows.event.clientX、windows.event.clientY來獲取光標(biāo)位置；在測試過程中發(fā)現(xiàn)，鼠標(biāo)點(diǎn)擊的時(shí)候可以取到正確的位置，但一旦把鼠標(biāo)移走，或者用上下左右鍵移動(dòng)光標(biāo)，就無法定位光標(biāo)的位置了。
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) + "條明細(xì)";
12: }windows.event.x/y/clientX/clientY，取得的是事件觸發(fā)時(shí)，鼠標(biāo)的位置，不是文本框中光標(biāo)的位置，所以這段代碼無法定位文本框中光標(biāo)的位置。
網(wǎng)上搜了下，找到另外一種實(shí)現(xiàn)方式，測試代碼如下：
1: <span id="stat">數(shù)量:0, 合計(jì):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 = "數(shù)量:" + a.length + ", 合計(jì):" + 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;//設(shè)置初始位置
28: input.focus();29: var scrollPosition = input.scrollTop;//獲得滾動(dòng)條的位置
30: var selectedRange = document.selection.createRange();//創(chuàng)建文檔選擇對象
31: rng.collapse(true);
32: rng.select();33: var j = document.selection.createRange();//為新的光標(biāo)位置創(chuàng)建文檔選擇對象
34: selectedRange.setEndPoint("StartToStart",j);//在以前的文檔選擇對象和新的對象之間創(chuàng)建對象
35: var str = selectedRange.text;//獲得對象的文本
36: var re = new RegExp("[\\n]","g");
37: str = str.replace(re,"");//過濾
38: length = str.length;//獲得長度.也就是光標(biāo)的位置
39: selectedRange.collapse(false);
40: selectedRange.select();//把光標(biāo)恢復(fù)到以前的位置
41: input.scrollTop = scrollPosition;//把滾動(dòng)條恢復(fù)到以前的位置
42: 43: var a = []; 44: str.replace(/\+/g, function($0) { a.push($0); });45: document.getElementById("position").innerHTML = "第" + (a.length + 1) + "個(gè)明細(xì)";
46: } 47: 48: function clearPosition(input) 49: {50: document.getElementById("position").innerHTML = "";
51: } 52: </script>
浙公網(wǎng)安備 33010602011771號(hào)