TextArea 光标定位(Rich Editor 雏形)-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_21250/article/details/81720508

网上有很多富文本编辑器，但最终都是离不开对光标的控制的，本文会从TextArea元素来做一个基本的示例尝试，有兴趣的同学可以尝试做一个更复杂的富文本编辑器练手。

网上找的示例：

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>光标位置</title>
<style>
INPUT{border: 1 solid #000000}
BODY,TABLE{font-size: 10pt}
</style>
</head><body><table border="0" width="700" cellspacing="0" cellpadding="0">
  <tr>
    <td width="479" rowspan="7">
点击 TextArea 实现光标定位                                    
                                    
<p>                                    
<textarea rows="7" cols="49" id="box" οnclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
</textarea>       
     
<script>     
     
function movePoint()     
{     
    var pn = parseInt(pnum.value);     
         
    if(isNaN(pn))     
        return;     
         
    var rng = box.createTextRange(); 
             
    rng.moveStart("character",pn);     
         
    rng.collapse(true);         
         
    rng.select();     
         
    returnCase(rng)         
             
}     
     
function tellPoint()     
{     
    var rng = event.srcElement.createTextRange();    
     
    rng.moveToPoint(event.x,event.y);         
    rng.moveStart("character",-event.srcElement.value.length);         
         
    pnum.value = rng.text.length;
    alert(rng.text);
    returnCase(rng);
}     
     
     
function returnCase(rng)     
{     
    bh.innerText = rng.boundingHeight;     
    bl.innerText = rng.boundingLeft;     
    bt.innerText = rng.boundingTop;     
    bw.innerText = rng.boundingWidth;     
    ot.innerText = rng.offsetTop;     
    ol.innerText = rng.offsetLeft;     
    t.innerText  = rng.text;     
}     
     
     
function selectText(sp,ep)     
{     
    sp = parseInt(sp)     
    ep = parseInt(ep)     
         
    if(isNaN(sp)||isNaN(ep))     
        return;     
             
    var rng = box.createTextRange();     
         
    rng.moveEnd("character",-box.value.length)     
    rng.moveStart("character",-box.value.length)     
         
    rng.collapse(true);     
         
    rng.moveEnd("character",ep)     
    rng.moveStart("character",sp)     
         
    rng.select();     
         
    returnCase(rng);     
}     var rg = box.createTextRange();
     
function findText(tw)     
{     
    if(tw=="")     
        return;        
         
    var sw = 0;     
         
    if(document.selection)     
    {     
        sw = document.selection.createRange().text.length;     
    }         
         
    rg.moveEnd("character",box.value.length);     
         
    rg.moveStart("character",sw);                      
    if(rg.findText(tw))         
    {     
        rg.select();         returnCase(rg);       
    }    
    
    if(rg.text!=tw)
    {
        alert("已经搜索完了")
        rg = box.createTextRange()
        }
             
}     
     
</script>                                  
</p>                                    
<p></p>                                    
光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onClick="movePoint()" value="移动光标到指定位置">                                 
<p></p>                               
选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onClick="selectText(sbox.value,ebox.value)" value="选择">                                
<p></p>                    
选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onClick="findText(cbox.value)" value="查找下一个并选择">                                 
                    
    </td>                              
    <td width="217">boundingHeight:&nbsp;<span id="bh"></span></td>                              
  </tr>                              
  <tr>                              
    <td width="217">boundingWidth:&nbsp;<span id="bw"></span></td>                              
  </tr>                              
  <tr>                              
    <td width="217">boundingTop:&nbsp;<span id="bt"></span></td>                              
  </tr>                              
  <tr>                              
    <td width="217">boundingLeft:&nbsp;<span id="bl"></span></td>                              
  </tr>                              
  <tr>                              
    <td width="217">offsetLeft:&nbsp;<span id="ol"></span> </td>                              
  </tr>                              
  <tr>                              
    <td width="217">offsetTop:&nbsp;<span id="ot"></span> </td>                              
  </tr>                              
  <tr>                              
    <td width="217">text:&nbsp;<span style="position: absolute; z-index: 10" id="t"></span> </td>                              
  </tr>                              
</table>                              
</body>                                    
                                    
</html>

个人示例尝试：

<html>
    <head>
        <title>测试一下获取textarea的光标位置以及插入文本</title>
        <script language="JavaScript" type="text/javascript">
            function test(){
                var myString = ""                
                var temp = event.srcElement.createTextRange();
                temp.moveToPoint(event.x,event.y);
                //把结束点移到最后
                temp.moveEnd("character",event.srcElement.value.length);
                alert(temp.text);
                //把开始点移到最前面
                temp.moveStart("character",-event.srcElement.value.length); 
                myString = temp.text;
                var mytt = document.getElementById('mytext').value;
                myString = myString + mytt;
                alert(myString);
                
                //myString = myString + document.getElementById('tt').value.substring(temp.text.length);
                //alert(myString);
                /*
                var rng = event.srcElement.createTextRange();    
 
                rng.moveToPoint(event.x,event.y);         
                rng.moveStart("character",-event.srcElement.value.length);    
                     
                //pnum.value = rng.text.length;
                alert(rng.text);
                */
            }
            
            function testend(){
                var myString = "";
                var temp = event.srcElement.createTextRange();
                temp.moveToPoint("character",event.srcElement.value.length);
                temp.moveStart(event.x,event.y);
                alert(temp.text);    
            }    
            function test2(){
                var textRange = tt.createTextRange();
                textRange.moveToPoint(indexX,indexY);
                textRange.moveStart("character",-tt.value.length);
                alert(textRange.text);
            }
            
            var indexX,indexY;
            function textIndex(){
                indexX = event.x;
                indexY = event.y;
                alert(indexX+"x");
                alert(indexY+"y");
            }
            
        </script>
    </head>
    <body>
        <textarea id="tt" cols="60" rows="30" onClick="textIndex();">
我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
        </textarea>
        <input id="mytext" type="text" value="我是陈海宇"/>
        <input type="button" onClick="test2();"/>
    </body>
</html>