指定选取textarea的特定行

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

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

 1<script language="javascript">   
 2/**   
 3* added by LxcJie 2004.7.16   
 4* 返回指定行的range对象   
 5* num为行号,areaId为textarea的id   
 6*/   
 7function getTextRange(num, areaId)   
 8{   
 9var range = document.all(areaId).createTextRange();   
10var rect = range.getClientRects();   
11var left = rect[0].left;   
12if(num > rect.length - 1 || num < 0)   
13return;   
14if(num == 0)   
15{   
16var right = rect[0].right; 
17
18range.moveEnd("character",-range.text.length);   
19while(range.offsetLeft + range.boundingWidth < right)   
20{   
21range.expand("character");   
22}   
23return range;   
24}   
25else   
26{   
27var right = rect[num].right; 
28
29var range = getTextRange(num - 1, areaId);   
30range.moveStart("character",range.text.length + 1);   
31while(range.offsetLeft + range.boundingWidth < right)   
32{   
33range.expand("character");   
34}   
35if(range.offsetLeft > left)   
36range.moveStart("character",-1);   
37return range;   
38}   
39} 
40
41function getText(num)   
42{   
43var range = getTextRange(num,"area")   
44if(range != null)   
45{   
46alert(range.text);   
47range.select();   
48}   
49}   
50</script>
1<textarea cols="50" id="area" rows="10">   
2客从东方来,衣上灞陵雨。   
3问客何为来,采山因买斧。   
4冥冥花正开,扬扬燕新乳。   
5昨别今已春,鬓丝生几缕。   
6</textarea>
1<p>
2<input onclick="getText(0)" type="button" value="选第一行"/>
3<input onclick="getText(1)" type="button" value="选第二行"/>
4<input onclick="getText(2)" type="button" value="选第三行"/>
5<input onclick="getText(3)" type="button" value="选第四行"/></p>
Published At
Categories with 网页设计
Tagged with
comments powered by Disqus