TextArea 光标定位(Rich Editor 雏形)

haiyupeter

浏览: 425965 次
性别:
来自: 广州

最近访客更多访客>>

chenyanfei

Jaakko

justplayoop1

zhaobin87

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Util

JavaScript HTML

网上有很多富文本编辑器，但最终都是离不开对光标的控制的，本文会从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" onclick=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>

分享到：

javascript日历 | JavaScript 可移动层

2009-05-13 16:23
浏览 2714
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

TextArea 光标定位(Rich Editor 雏形)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

TextArea 光标定位(Rich Editor 雏形)

评论

发表评论

相关推荐

阿里云心得

jQuery插件实例集合

国内那些UED团队

建立Web站点

一名程序员，实用的一些工具

selenium测试使用心得

大数据量的存储及检索

初学ubuntu系统工具

对于设计模式的理解

项目管理人际关系

google的GO语言环境安装

JavaScript 表格排序

浏览器窗口相关宽度和高度解析

javascript日历

JavaScript 可移动层

JavaSciprt数组（转）

JavaScript Number控件

最近访客更多访客>>