Positioning the cursor position TextArea

In the project, a scenario encountered: want to allow entry of a record in the TextArea detail (detail simpler, without collateral information, and sequentially recording only values can, for example, with a "+" as the detail delimiter : 1 + 1.5 + 3.4 + 2), as shown below:

In order to make more intuitive input, you need to enter the process, real-time displays a summary of the number and total; if the user wants to edit the text in the middle of a strip details, or by clicking the mouse, or up and down left and right keys on the keyboard to locate certain details, and prompts the focal position of the cursor on the page.

In the beginning, to get the cursor position by windows.event.x, windows.event.y, windows.event.clientX, windows.event.clientY; during testing found the mouse to click when you can get to the right place, but Once the mouse is removed, or use arrow keys to move the cursor, it is unable to locate the position of the cursor.

windows.event.x / y / clientX / clientY, acquired when the event is triggered, the position of the mouse position, instead of the cursor in the text box, so this code can not locate the position of the cursor in the text box.

Internet search, find another one implementation, test code is as follows:

 
       . 1: <span ID = "STAT" > Number: 0, total: 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> 
    function calcWeight(input, c) 
    { 
         There are a = []; 
        input.value.replace(/\d+([\.]\d+){0,1}/g, function($0) { a.push($0); }); 
        var sum = eval(a.join("+")) || 0; 
        document.getElementById("stat").innerHTML = "数量:" + a.length + ", 合计:" + sum.toFixed(2); 
        if (c) 
        { 
            input.value = a.join("+"); 
        } 
    } 
   
    calcWeight(document.getElementById("tbxWeightDetail")); 
   
    function getPosition(input) 
    { 
        var rng = event.srcElement.createTextRange(); 
        var length = 0;//设置初始位置 
        input.focus(); 
        var scrollPosition = input.scrollTop;//获得滚动条的位置   
        var selectedRange = document.selection.createRange();//创建文档选择对象 
        rng.collapse(true); 
        rng.select(); 
        var j = document.selection.createRange();//为新的光标位置创建文档选择对象 
        selectedRange.setEndPoint("StartToStart",j);//在以前的文档选择对象和新的对象之间创建对象 
        var str = selectedRange.text;//获得对象的文本 
        var re = new RegExp("[\\n]","g"); 
        str = str.replace(re,"");//过滤   
        length = str.length;//获得长度.也就是光标的位置   
        selectedRange.collapse(false);   
        selectedRange.select();//把光标恢复到以前的位置 
        input.scrollTop = scrollPosition;//把滚动条恢复到以前的位置 
   
         There are a = []; 
        str.replace(/\+/g, function($0) { a.push($0); }); 
        document.getElementById("position").innerHTML = "第" + (a.length + 1) + "个明细"; 
    } 
   
    function clearPosition(input) 
    { 
        document.getElementById("position").innerHTML = ""; 
    } 
</script> 
   

Reproduced in: https: //www.cnblogs.com/happyhippy/archive/2010/08/06/1794383.html

Positioning the cursor position TextArea

Guess you like