TextArea中定位光标位置-白红宇

TextArea中定位光标位置

阅读量：5128 次

发布时间：2019-06-13

本文共 2412 字，大约阅读时间需要 8 分钟。

原文:

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

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

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

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

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

数量:0, 合计:0



    οnchange="getPosition(this);calcWeight(this, true);"
    οnkeyup="getPosition(this);calcWeight(this);" οnclick="getPosition(this);" οnblur="clearPosition(this);"
    >
 

    function calcWeight(input, c)
    {
        var 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;//把滚动条恢复到以前的位置
 
        var a = [];
        str.replace(/\+/g, function($0) { a.push($0); });
        document.getElementById("position").innerHTML = "第" + (a.length + 1) + "个明细";
    }
 
    function clearPosition(input)
    {
        document.getElementById("position").innerHTML = "";
    }


posted on

2014-08-21 13:07 阅读(

...) 评论(

...)

转载于:https://www.cnblogs.com/lonelyxmas/p/3926948.html

你可能感兴趣的文章