JS获得textarea的鼠标位置和光标定位在指定位置（IE8/FF）

最新推荐文章于 2022-11-21 17:53:08 发布

weixin_33743661

最新推荐文章于 2022-11-21 17:53:08 发布

阅读量1.2k

点赞数

文章标签： xhtml python javascript ViewUI

原文链接：https://my.oschina.net/mahaisong/blog/146193

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <script type="text/javascript">
            //实现获取焦点位置信息基本功能
            function getOffsetPointer(_mOffset) {
                if (document.selection) {
                    var OffsetObject = new Object();
                    var _allText = _mOffset.value; //输入框的所有值
                    _mOffset.focus(); //输入框获得焦点
                    var s = _mOffset.scrollTop; //获得滚动条的位置
                    var _rOffset = document.selection.createRange(); //创建文档选择对象根据当前文字选择返回 TextRange 对象
                    var _tOffset = _mOffset.createTextRange(); //创建输入框文本对象
                    _tOffset.collapse(true); //将光标移到头
                    _tOffset.select(); //显示光标
                    var _nOffset = document.selection.createRange(); //为新的光标位置创建文档选择对象
                    //在这里主要介绍下TextRange对象的setEndPoint方法和compareEndPoints方法
                    //先介绍setEndPoint("[way]",oRange)方法：将当前范围的开始或结束点移动到oRange范围的开
                    //始或者结束点
                    //该方法有两个参数:[way]表示将当前范围以何种方式移动到oRange范围，有四种方式：
                    //StartToStart将当前开始位置移动到oRange的开始位置，
                    //StartToEnd将当前范围开始位置移动到oRange的结束位置，EndToStart将当前结束位置移动到
                    //oRange的开始位置，EndToEnd将当前范围的结束位置
                    //移动到oRange的结束位置，oRange该对象也是TextRange，oRange的开始和结束位置代表要移动到
                    //的目标位置
                    _rOffset.setEndPoint("StartToStart", _nOffset); //在以前的文档选择对象和新的对象之间创建对象
                    var _leftText = _rOffset.text; //获得文档选择对象的文本(从鼠标焦点到文档开头的文本)
                    var leFTPos = _leftText.length; //文档开头到鼠标焦点的文本长度
                    var _rightText = _allText.substring(leFTPos); //获取鼠标焦点到文档结束的文本
                    alert(leFTPos);
                    OffsetObject.length = leFTPos;
                    OffsetObject.scrollTop = s;
                    OffsetObject.leftValue = _leftText;
                    OffsetObject.rightValue = _rightText;

                    return leFTPos;
                } else {
                    alert(_mOffset.selectionStart);
                    return _mOffset.selectionStart;
                }
            }

            function dingwei(obj) {
                if (document.selection) {
                    var a = document.getElementById("t2").createTextRange();
                    a.moveStart('character', 3); //将开始点向前移动三个位置(每个位置就是一个字符)
                    a.collapse(true);
                    a.select();
                } else {
                    var a = document.getElementById("t2");
                    a.selectionStart = 3;
                    a.focus();
                }
            }
        </script>
    </head>

    <body>
        <input type="text" value="HELLO jb51" style="display:block">
        <textarea rows="6" id="t2" cols="60" οnmοuseup="getOffsetPointer(this)">
            jb51 HELLO!
        </textarea>
        <button οnclick="dingwei()" />
    </body>

</html>

本人声明：沐海（http://my.oschina.net/mahaisong）以上文章是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言！欢迎交流！

第二版：修改后，可以定位带有换行符号与删除功能。

删除功能不赘述，通过JQUERY 进行绑定keyup事件。对于不同的event.code进行操作即可。

如果是删除，则重新调用一下这个方法即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <script type="text/javascript">
            //实现获取焦点位置信息基本功能
            function getOffsetPointer()
           {
               var _mOffset=document.getElementById("t2");
                if (document.selection) {
                    var OffsetObject = new Object();
                    var _allText = _mOffset.value; //输入框的所有值
                    _mOffset.focus(); //输入框获得焦点
                    var s = _mOffset.scrollTop; //获得滚动条的位置
                    var _rOffset = document.selection.createRange(); //根据当前文字选择返回 TextRange 对象文档选择对象
                    var _tOffset = _mOffset.createTextRange(); //创建输入框文本对象--整体
                    _tOffset.collapse(true); //将光标移到头
                    _tOffset.select(); //显示光标，整体选中
                    var _nOffset = document.selection.createRange(); //鼠标选中textarea的左上位置。
                    _rOffset.setEndPoint("StartToStart", _nOffset); //把原本选中的范围的开始位置拉伸到textarea的开始位置。
                    var _leftText = _rOffset.text.replace(/\r\n/g,''); //获得文档选择对象的文本(从鼠标焦点到文档开头的文本)
                   alert(_rOffset.text);
                    var leFTPos = _leftText.length; //文档开头到鼠标焦点的文本长度
                    var _rightText = _allText.substring(leFTPos); //获取鼠标焦点到文档结束的文本
                    alert(leFTPos);
                    OffsetObject.length = leFTPos;
                    OffsetObject.scrollTop = s;
                    OffsetObject.leftValue = _leftText;
                    OffsetObject.rightValue = _rightText;

                   //var n = document.getElementById("t2").value.match(/\r\n/g)||[];
                   //alert(n.length);
                   //_tOffset.scrollTop = s;
                    //_tOffset.moveStart('character', leFTPos+parseInt(n.length)); //将开始点移动到位置。光标还在原位置。位置计算好几个\R\N，加上
                    //_tOffset.collapse(true);
                    //_tOffset.select();
                    return leFTPos;
                } else {
                    alert(_mOffset.selectionStart);
                    return _mOffset.selectionStart;
                }
            }

            function dingwei(leFTPos,s) {
                if (document.selection) {
                    var a = document.getElementById("t2").createTextRange();
                   var n = document.getElementById("t2").value.match(/\r\n/g)||[];
                   a.scrollTop = s;
                    a.moveStart('character', leFTPos+parseInt(n.length)); //将开始点向前移动三个位置(每个位置就是一个字符)
                    a.collapse(true);
                    a.select();
                } else {
                    var a = document.getElementById("t2");
                    a.selectionStart = leFTPos;
                    a.focus();
                }
            }
        </script>
    </head>

    <body>
        <input type="text" value="HELLO jb51" style="display:block">
        <textarea rows="6" id="t2" cols="60" οnmοuseup="getOffsetPointer()" >
jb51 HELLO!
        </textarea>
        <button οnclick="dingwei()" />
    </body>

</html>

第三版：

改进为每次需要做文本处理时再调用当前光标。提高效率。

AJAX传递时，通过onclientclick与onclick结合的两种方式。得到当前的文本的光标位置。

在光标位置中插入文本，并根本要插入的文本类型与光标值计算输出后的光标位置。

调用前台JS的方法。注入。定位光标位置。

建议treeview还需要做JS的doPostBack的操作。

改成：
可以每次操作都记录。然后存入一个隐藏域。
回发时，后台设置 textarea值，设置隐藏域值，调用前台定位JS光标。

       var IDS;
              function onReady() {
                  IDS = {
                      txtleFTPos: '<%= leFTPos.ClientID %>',
                      textscrollTop: '<%= scrollTop.ClientID %>',
                      textExpressValue: '<%= ExpressValue.ClientID %>'
                       };

                  jQuery("#" + IDS.textExpressValue).keyup(function () { getOffsetPointer(IDS.textExpressValue);}).mouseup(function () { getOffsetPointer(IDS.textExpressValue); });

             //实现获取焦点位置信息基本功能
             function getOffsetPointer(id) {
                 var _mOffset = document.getElementById(id);
                 if (document.selection) {
                     var _allText = _mOffset.value; //输入框的所有值
                     _mOffset.focus(); //输入框获得焦点
                     var s = _mOffset.scrollTop; //获得滚动条的位置
                     var _rOffset = document.selection.createRange(); //根据当前文字选择返回 TextRange 对象文档选择对象
                     var saverset = document.selection.createRange();
                     var rlength = _rOffset.text.length;
                     var _tOffset = _mOffset.createTextRange(); //创建输入框文本对象--整体
                     _tOffset.collapse(true); //将光标移到头
                     _tOffset.select(); //显示光标，整体选中
                     var _nOffset = document.selection.createRange(); //鼠标选中textarea的左上位置。
                     _rOffset.setEndPoint("StartToStart", _nOffset); //把原本选中的范围的开始位置拉伸到textarea的开始位置。
                     var n = _rOffset.text.match(/\r\n/g) || [];
                     var _leftText = _rOffset.text.replace(/\r\n/g, ''); //获得文档选择对象的文本(从鼠标焦点到文档开头的文本)
                     var leFTPos = parseInt(_leftText.length)+parseInt(n.length); //文档开头到鼠标焦点的文本长度
                     var _rightText = _allText.substring(leFTPos); //获取鼠标焦点到文档结束的文本
                     if (!(rlength > 0)) //非选中文字
                     {
                         dingwei(leFTPos, s, IDS.textExpressValue);
                     } else //选中文字的保持选中选区的方法。
                     {
                         saverset.select();
                     }
                     jQuery("#" + IDS.txtleFTPos).val(leFTPos);
                     jQuery("#" + IDS.textscrollTop).val(s);
                     return leFTPos;
                 } else {
                     jQuery("#" + IDS.txtleFTPos).val(_mOffset.selectionStart);
                     jQuery("#" + IDS.textscrollTop).val("-1");
                     return _mOffset.selectionStart;
                 }
             }

             function dingwei(leFTPos, s, id) {
                 if (document.selection) {
                     var a = document.getElementById(id).createTextRange();
                     //var n = document.getElementById(id).value.match(/\r\n/g) || [];
                     a.scrollTop = s;
                     //a.moveStart('character', leFTPos + parseInt(n.length)); //将开始点向前移动三个位置(每个位置就是一个字符)
                     a.moveStart('character', leFTPos);
                     a.collapse(true);
                     a.select();
                 } else {
                     var a = document.getElementById(id);
                     a.selectionStart = leFTPos;
                     a.focus();
                 }
             }
         }

第三版实现。

后台插入，无法得到具体的换行。因为不知道本行的长度，以及加入文本后是否换行。

将导致换行后，表达式定位文本少一位，无法继续输入内容。

解决方案2种：一种，设置textarea的列，规定每一行多少字。然后得到当前行的文本长度。

第二种，输入即缩进。

得到当前的长度则可以实现换行。

后台输入：换行两个字符缩进输出 \r\n 然后是想要的文本。

因为我知道自己的文本是不会超过的。

可是换行是不是太多了。

更棒的方法思路：

因为记录了原本的光标位置。通过新的光标位置与原本的之间的文本查看是否有插入\r\n，有则把新的光标位置+1即可。

//隐藏域位置长度（用于插入，计算新的位置 +回传）+ 滚动条位置（回传）。
//输入的长度是否换行？通过返回的JS的新的位置与老位置之间是否有换行来决定新的位置是否加1（+换行数量），滚动条位置要设置为最新的（用于自动滚动位置）。

哈哈。