如何利用JS代碼選取textarea中的指定行

【實例名稱】

選取textarea中的指定行

【實例描述】

使用控件的focus或select方法，可以很方便地選取textarea的所有內(nèi)容，但卻無法實現(xiàn)某行的選取。本例講解如何選取textarea中的指定行。

【實例代碼】

   <function getTxtRow(num, mytxt)   //獲取指定行的方法-第二個參數(shù)為文本框ID
{
                                 //獲取文本框內(nèi)當(dāng)前光標(biāo)的位置
    var range = document.getElementById(mytxt).createTextRange();
    var rect = range.getClientRects();//返回一個矩形
    var left = rect[0].left;
    if(num > rect.length - 1 || num < 0)
        return;
    if(num == 0)               //選擇第一行的情況
    {
      //設(shè)置選擇范圍
       var right = rect[0].right;
       range.moveEnd("character",-range.text.length);   
       while(range.offsetLeft + range.boundingWidth < right)
       {
           range.expand("character");
       }
       return range;
    }
    else
    {
       //設(shè)置選擇范圍
        var right = rect[num].right;
        var range = getTxtRow(num - 1, mytxt);
        range.moveStart("character",range.text.length + 1);
        while((range.offsetLeft + range.boundingWidth) < right)
        {
            range.expand("character");
        }
        if(range.offsetLeft > left)
            range.moveStart("character",-1);
        return range;
    }
}
//選擇指定行數(shù)的方法
function getText(num)
{
    var range = getTxtRow(num,"txt")//調(diào)用真正的獲取行方法
    if(range != null)                //如果指定的行內(nèi)容不為空
    {
        alert(range.text);
        range.select();              //選擇指定的行
    }
}
</SCRIPT>

【運行效果】

【難點剖析】

 本例的難點在于光標(biāo)的獲取，以及文本的選擇范圍。使用“createTextRange”方法獲取文本中光標(biāo)的位置。使用“getclientRects”選擇一個范圍，然后設(shè)置范圍的起始位置和結(jié)束位置。最后使用“select”方法選擇整行內(nèi)容。

【源碼下載】

本實例JS代碼下載