当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 指定选取textarea的特定行

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

HTML/XHTML教程 中的 指定选取textarea的特定行


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 65 ::
收藏到网摘: n/a

  通常状况下,大家都使采用判断来判断textarea控件中含有多少行,但是,有这么一种情况,就是没有使用回车,而是字符过宽而textarea自动换的行,很显然,上面那种方法就不可行了.

  这里,封装了一个方法getTextRange(num, areaId),这个方法只需要传入textarea的id及其需要的行号,即可以返回指定行,为了灵活,这里没有返回指定行的文本,而是返回了指定行的一个trange对象,如果需要文本,只需调用trange对象的text属性即可.

 

<SCRIPT language="javascript">
/**
 * added by LxcJie 2004.7.16
 * 返回指定行的range对象
 * num为行号,areaId为textarea的id
 */
function getTextRange(num, areaId)
{
    var range = document.all(areaId).createTextRange();
    var rect = range.getClientRects();
    var left = rect[0].left;
    if(num > rect.length - 1 || num < 0)
        return;
    if(num == 0)
    {
       var right = rect[0].right;

       range.moveEnd("character",-range.text.length);  
       while(range.offsetLeft + range.boundingWidth < right)
       {
           range.expand("character");
       }
       return range;
    }
    else
    {
        var right = rect[num].right;

        var range = getTextRange(num - 1, areaId);
        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;
    }
}

function getText(num)
{
    var range = getTextRange(num,"area")
    if(range != null)
    {
        alert(range.text);
        range.select();
    }
}
</SCRIPT>
<TEXTAREA cols="50" rows="10" id="area">
客从东方来,衣上灞陵雨。
问客何为来,采山因买斧。
冥冥花正开,扬扬燕新乳。
昨别今已春,鬓丝生几缕。
</TEXTAREA><p>

<input type="button" onClick="getText(0)" value="选第一行">
<input type="button" onClick="getText(1)" value="选第二行">
<input type="button" onClick="getText(2)" value="选第三行">
<input type="button" onClick="getText(3)" value="选第四行">