當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 利用JS代碼分行取textarea中的值

利用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)      //行號，文本區(qū)域的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;             //返回選擇區(qū)域
    } 
    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>

【運行效果】

運行效果

【難點剖析】

本例的重點是如何實現選擇一段文本?！癱reateTextRange”用來創(chuàng)建選擇范圍，“moveStart”、“moveEnd”、“expand”方法實現復雜選區(qū)，這些方法都接收兩個參數：移動的單位和移動單位的個數。其中移動單位是同定值：“character”，“word”，“sentencce”或“textedit”。

【源碼下載】

本實例JS代碼下載

標簽： JS代碼  textarea