利用JS代码分行取textarea中的值

2012/10/21 14:47:16作者：佚名来源：网络

移动端

【实例名称】

分行取textarea中的值

【实例描述】

在文本域内选择文本叫，可以一行一行地选择，同时这个选择是自动的。本例学习如何实现这种效果。

【实例代码】

<HTML> 
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<SCRIPT language="javascript"> 
function getRange(num, areaId)      //行号，文本区域的ID
{ 
    var txtRange = document.all(areaId).createTextRange(); //获取鼠标
    var rect = txtRange.getClientRects();                  //选择范围
    var left = rect[0].left;                            //左侧位置
    if(num > rect.length - 1)                           //超出行范围
        return; 
    if(num == 0)                                        //如果是第一行
    { 
       var right = rect[0].right; 
       txtRange.moveEnd("character",-txtRange.text.length); //移动到结尾
       while(txtRange.offsetLeft + txtRange.boundingWidth < right) //没有到结尾
       { 
           txtRange.expand("character");      //扩展宽度到结尾
       } 
       return txtRange;             //返回选择区域
    } 
    else 
    { 
        var right = rect[num].right;                 //右侧范围
        var txtRange = getRange(num - 1, areaId);         //获取选择域
        txtRange.moveStart("character",txtRange.text.length + 1); //移动到开始位置
        while(txtRange.offsetLeft + txtRange.boundingWidth < right) //如果没有到结尾
        { 
            txtRange.expand("character");        //扩展到结尾
        } 
    if(txtRange.offsetLeft > left) 
            txtRange.moveStart("character",-1);       //开始位置前
        return txtRange; 
    } 
} 
function getText(num)               //根据行号，返回选择
{ 
    var txtRange = getRange(num,"mytxt") 
    if(txtRange != null) 
    { 
        txtRange.select();             //如果不为空，则选择
    } 
} 
</SCRIPT> 
</HEAD> 
<BODY> 
<TEXTAREA cols="40" rows="10" id="mytxt">
第一行
第二行
第三行
</TEXTAREA><p> 
<input type="button" onClick="getText(0)" value="选第一行"> 
<input type="button" onClick="getText(1)" value="选第二行"> 
<input type="button" onClick="getText(2)" value="选第三行"> 
</BODY> 
</HTML>

【运行效果】

【难点剖析】

本例的重点是如何实现选择一段文本。“createTextRange”用来创建选择范围，“moveStart”、“moveEnd”、“expand”方法实现复杂选区，这些方法都接收两个参数：移动的单位和移动单位的个数。其中移动单位是同定值：“character”，“word”，“sentencce”或“textedit”。

【源码下载】

本实例JS代码下载

标签： JS代码

热门软件/ 推荐游戏/ 手机软件

利用JS代码分行取textarea中的值

资讯分类

推荐教程

精品软件推荐