20100705 学习记录:textarea内容的格式控制(回车、换行、空格)

表单对象textarea内容的格式控制(回车、换行、空格)

 1.

ExpandedBlockStart.gif 代码
<!-- 1.htm -->

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 无标题文档 </ title >
</ head >

< body >
< form  name ="form1"  method ="post"  action ="t.asp" >
  
< p >
    
< textarea  name ="textarea"  cols ="50"  rows ="10" ></ textarea >
  
</ p >
  
< p >      < input  type ="submit"  name ="Submit"  value ="提交" >
    
< input  type ="reset"  name ="Submit2"  value ="重置" >
    
</ p >
</ form >
</ body >
</ html >

<!-- t.asp -->

<% @LANGUAGE = " VBSCRIPT "  CODEPAGE = " 936 " %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 无标题文档 </ title >
</ head >

< body >
<%
dim  msg
msg
= request.Form( " textarea " )
msg
= replace (msg,vbcrlf, " <br> " )
msg
= replace (msg, "   " , " &nbsp; " )
response.write msg
%>

</ body >
</ html >

2.

ExpandedBlockStart.gif 代码
asp中使form中textarea的中的换行符与空格能够写入数据库,读出时还原原来用户输入格式

< textarea name = " Course "  cols = " 37 "  rows = " 4 "  id = " Course " ></ textarea >

1 、读入数据时,就是将Char( 10 )转换为 < br > ,可以加载下面两个函数:

     ChkBadWords(fString)   
           
if      not ( isnull (BadWords)     or      isnull (fString))     then    
           bwords    
=      split (BadWords,     " | " )   
           
for     i     =      0      to      ubound (bwords)   
                   fString    
=      Replace (fString,    bwords(i),     string ( len (bwords(i)), " * " ))     
           
next    
           ChkBadWords    
=     fString   
           
end      if    
   
end    

    HTMLEncode(fString)   
   
if      not      isnull (fString)     then    
           fString    
=      replace (fString, " > " , " &gt; " )   
           fString    
=      replace (fString, " < " , " &lt; " )   
           fString    
=      Replace (fString,  CHR ( 32 ), " &nbsp; " )   
           fString    
=      Replace (fString,  CHR ( 9 ), " &nbsp; " )   
           fString    
=      Replace (fString,  CHR ( 34 ), " &quot; " )   
           fString    
=      Replace (fString,  CHR ( 39 ), " ' " )   
           fString    
=      Replace (fString,  CHR ( 13 ), "" )   
           fString    
=      Replace (fString,  CHR ( 10 ) & CHR ( 10 ),  " </P><P>     " )   
           fString    
=      Replace (fString,  CHR ( 10 ), " <BR> " )   
           fString
= ChkBadWords(fString)   
           HTMLEncode    
=     fString   
   
end      if    
   
end

Course
= trim ( replace (request.form( " Course " ), " ' " , "" ))
Course
= HTMLEncode(Course)

2 、读到页面代码:

content
= rs( " content " )   
   response.write   content

3 、重新读到   textarea   修改,要先其数据还原回来,可以调用以下的函数:

'  去除Html格式,用于从数据库中取出值填入输入框时
'
 注意:="?"这边一定要用双引号
'
 ============================================
inHTML(str)
Dim  sTemp
sTemp 
=  str
inHTML 
=   ""
If   IsNull (sTemp)  =   True   Then
   
Exit
End   If
sTemp 
=   Replace (sTemp,  " &lt; " , " < " )
sTemp 
=   Replace (sTemp, " &gt; " , " > "  )
sTemp 
=   Replace (sTemp, " &quot; " , Chr ( 34 ))
sTemp 
=   Replace (sTemp, " <BR> " , CHR ( 10 ))  
sTemp 
=   Replace (sTemp,  "   " , CHR ( 13 ))
sTemp 
=   Replace (sTemp, " &nbsp; " , CHR ( 32 ))
sTemp 
=   Replace (sTemp, " &nbsp; " , CHR ( 9 ))
sTemp 
=   Replace (sTemp, " ' " , CHR ( 39 ))
sTemp 
=   Replace (sTemp, " </P><P> " CHR ( 10 ) & CHR ( 10 ))
inHTML 
=  sTemp
End

Course
= inHTML(rs( " Course " ))

< textarea name = " Course "  cols = " 37 "  rows = " 4 " >< % =  Course % ></ textarea >

 

 


 

Html元素<textarea></textarea>文本域标签,里面可以输入文字,当然回车换行也是允许的。

当我们往数据库存储的时候,回车换行被转换为"\r\n"

如果不注意,可能会出现这样的情况,数据取出来,直接window.write(string) 或者 element.value = string

回车换行会自动折行,像这样"abcdabcd\r\nabc" ==>  abcdabcd

                                                                              abc



在 textarea 中输入回车符 在 js 读取 textarea 中的值有\r\n 然后到业务层转换到 string 中就有可能变成空格形式然后被存入数据库,当在取出此值的时候则会变成空格的形式,因此我们需要将不显示的\r\n 替换一下。 在js 取textarea 的时候: 如果用 var str = document.getElementById("textarea").value; str = str.replace("\r\n","<br>"); 则只会将第一个\r\n 替换成<br>,如何将所有n 个\r\n 替换成<br>呢?难道要无限个replace 吗? 其实不用,replace 可以和正则表达式结合,一次替换所有的\r\n。 var reg=new RegExp("\r\n","g"); str= str.replace(reg,"\r\n"); 这样str 中所有的\r\n 就替换成<br>了.然后可以将其存入数据库。 在取出的时候 只用将值在替换回来即可 var reg=new RegExp("<br>","g"); stt= str.replace(reg,"\r\n"); document.getElementById("textarea").value=str; 更加详细的分析和应用可以参考JavaScript 的replace 方法与正则表达式结合应用讲解 下面是我写的2 个函数 直接放到通用包中 以后使用可以替换 function replaceTextarea1(str){ var reg=new RegExp("\r\n","g"); var reg1=new RegExp(" ","g"); str = str.replace(reg,"<br>"); str = str.replace(reg1,"<p>"); return str; } function replaceTextarea2(str){ var reg=new RegExp("<br>","g"); var reg1=new RegExp("<p>","g"); str = str.replace(reg,"\r\n"); str = str.replace(reg1," "); return str; } 2. html 中通标签提交的内容会将回车转变成"\r\n",再将提交的内容放入
<textarea>标签中显示时,回车符会还原成正常的换行。
 
但当带有"\r\n"的字符串放在html 的普通文本域中显示时 ,原来的换行效果会转变成空格,
因此,需要在显示前将字符串中的"\r\n"替换为"</br>"。
 
另外,还有一点需要注意:EL 表达式会将"</br>"换行符转变成"</br>","<"和
">"分别对应"<"和">",也就是说,到了页面上,还是显示为"</br>"(呵呵,EL 的智能化程
度太高了),为了补救这一点,需要使用jsp 标签(<%= %>)来进行显示。
 
所以当需要在普通文本域中显示由<textarea>提交的内容时,可以直接在数据库里存储不经
过处理的字符串,而只在显示前将"\r\n"替换为"</br>",然后在页面上使用<%= %>来显示这
些内容.
 
 
 
3. 如果将通过textbox 提交到数据库中的空格和回车正确显示出来
public   string   MyReplace(string   mystr)    
  {    
  if(mystr   ==   null   ||   mystr   ==   ""   )    
  {    
  return(" ");    
  }    
  else    
  {    
  mystr   =   mystr.Replace("\n\r","<br>");    
  mystr   =   mystr.Replace("\r","<br>");    
  mystr   =   mystr.Replace("\t","    ");    
  return(mystr);    
  }    
  }
 



asp中使form中textarea的中的换行符与空格能够写

入数据库,读出时还原原来用户输入格式<textarea name="Course" cols="37" rows="4" id="Course"></textarea>
1、读入数据时,就是将Char(10)转换为<br>,可以加载下面两个函数:  

 

ExpandedBlockStart.gif 代码
ChkBadWords(fString)  
           
if      not ( isnull (BadWords)     or      isnull (fString))     then   
           bwords    
=      split (BadWords,     " | " )  
           
for     i     =      0      to      ubound (bwords)  
                   fString    
=      Replace (fString,    bwords(i),     string ( len (bwords(i)), " * " ))    
           
next   
           ChkBadWords    
=     fString  
           
end      if   
   
end        HTMLEncode(fString)  
   
if      not      isnull (fString)     then   
           fString    
=      replace (fString, " > " , " &gt; " )  
           fString    
=      replace (fString, " < " , " &lt; " )  
   
           fString    
=      Replace (fString,  CHR ( 32 ), " &nbsp; " )  
           fString    
=      Replace (fString,  CHR ( 9 ), " &nbsp; " )  
           fString    
=      Replace (fString,  CHR ( 34 ), " &quot; " )  
           fString    
=      Replace (fString,  CHR ( 39 ), " ' " )  
           fString    
=      Replace (fString,  CHR ( 13 ), "" )  
           fString    
=      Replace (fString,  CHR ( 10 ) & CHR ( 10 ),  " </P><P>     " )  
           fString    
=      Replace (fString,  CHR ( 10 ), " <BR> " )  
           fString
= ChkBadWords(fString)  
           HTMLEncode    
=     fString  
   
end      if   
   
end  Course = trim ( replace (request.form( " Course " ), " ' " , "" ))
Course
= HTMLEncode(Course)

2、读到页面代码:content=rs("content")  

   response.write   content

3、重新读到   textarea   修改,要先其数据还原回来,可以调用以下的函数:

 

ExpandedBlockStart.gif 代码
'  去除Html格式,用于从数据库中取出值填入输入框时
'
 注意:="?"这边一定要用双引号
'
 ============================================
inHTML(str)
Dim  sTemp
sTemp 
=  str
inHTML 
=   ""
If   IsNull (sTemp)  =   True   Then
   
Exit
End   If
sTemp 
=   Replace (sTemp,  " &lt; " , " < " )
sTemp 
=   Replace (sTemp, " &gt; " , " > "  )
sTemp 
=   Replace (sTemp, " &quot; " , Chr ( 34 ))
sTemp 
=   Replace (sTemp, " <BR> " , CHR ( 10 ))
sTemp 
=   Replace (sTemp,  "   " , CHR ( 13 ))
sTemp 
=   Replace (sTemp, " &nbsp; " , CHR ( 32 ))
sTemp 
=   Replace (sTemp, " &nbsp; " , CHR ( 9 ))
sTemp 
=   Replace (sTemp, " ' " , CHR ( 39 ))
sTemp 
=   Replace (sTemp, " </P><P> " CHR ( 10 ) & CHR ( 10 ))

inHTML 
=  sTemp
End  Course = inHTML(rs( " Course " )) < textarea name = " Course "  cols = " 37 "  rows = " 4 " >< % =  Course % ></ textarea >


 

 很牛的研究帖....

 

关于textarea的直观换行的一些研究材料

 前两天研究了一下textarea的直观行的换行规律,挺复杂啊:

直观行怎样取不光要看cols大小,还要看网页编码方式。
cols="30"的textarea,实际上每行可以容纳29个半角字符,多少个全角字符就不一定了,与网页编码方式有关。
在IE6.0实测的情况,直观行的换行发生在红字处(红字折到下一行)。

dddddddddddd米ddddddddddddddddddddd //全角后面的连续半角内容被当成一个完整单词处理,如果剩下的位置容不下单词的长度了,就要换行,此为 特殊规律A

网页按Unicode编码(“运行代码”的弹出页面即按此编码,JS生成的页面均按此编码)时的一般规律是

“占满”是说后面无论再跟全角、半角字符,都得换行)

123456789012345678901234567890 //29半角占满
一二三四五六七八九十一二三四五六七八九十 //17全角占满
一二三四五六七八九十一二三四五六七0八九十
一二三四五六七八九十一二三四五六0七八九十
0一二三四五六七八九十一二三四五六1七八九十 //16全角,1半角占满
0一二三四五六七八九十一二三四五六七八九十
0一二三四五六七八九十一二三四五1六七八九十 //15全角,2半角后不可容全角
01一二三四五六七八九十一二三四五六七八九十
01一二三四五六七八九十一二三四五2六七八九十 //15全角,2半角后可再容1半角(多于1半角时按特殊规律A)
012一二三四五六七八九十一二三四五六七八九十 //15全角,3半角占满
012一二三四五六七八九十一二三四五3六七八九十
0123一二三四五六七八九十一二三四五六七八九十 //14全角,4半角后不可容全角
0123一二三四五六七八九十一二三四4五六七八九十 //14全角,4半角后可再容1半角(多于1半角时按特殊规律A)
01234一二三四五六七八九十一二三四五六七八九十 //14全角,5半角占满
01234一二三四五六七八九十一二三四5五六七八九十
012345一二三四五六七八九十一二三四五六七八九十 //13全角,6半角后不可容全角
012345一二三四五六七八九十一二三6四五六七八九十 //13全角,6半角后可容1半角(多于1半角时按特殊规律A)
0123456一二三四五六七八九十一二三四五六七八九十 //13全角,7半角占满
0123456一二三四五六七八九十一二三7四五六七八九十
01234567一二三四五六七八九十一二三四五六七八九十 //12全角,8半角占满
01234567一二三四五六七八九十一二8三四五六七八九十
012345678一二三四五六七八九十一二三四五六七八九十 //11全角,9半角后不可容全角
012345678一二三四五六七八九十一9二三四五六七八九十 //11全角,9半角后可再容1半角(多于1半角时按特殊规律A)
0123456789一二三四五六七八九十一二三四五六七八九十 //11全角,10半角占满

……

0一二三四五六七八九十一二三四五12六七八九十 //15全角,1半角后可再容2半角连续字符(多于2半角时按特殊规律A),此条可由15全角,3半角占满得出

……

0一二三四五六七八九十一二三四1234五六七八九十 //14全角,1半角后可再容4半角连续字符(多于4半角时按特殊规律A),此条可由14全角,5半角占满得出

……

01一二三四五六七八九十一二三四234五六七八九十 //14全角,2半角后可再容3半角连续字符(多于3半角时按特殊规律A),此条可由14全角,5半角占满得出

……
换行位置不仅与换行位置之前的整行文字有关,还与红字有关(往往全角文字是因为无法在上行末尾挤下才被折到下一行的)。

总结一下就有:
复制内容到剪贴板
代码:
x全角,y半角占满 = x全角,y-1半角后不可容全角 = x全角,y-n半角后可再容n半角连续字符(多于n半角时按特殊规律A)。
所以做实验搞清楚所有“占满”的情形就可以了。

现将cols=30,网页按Unicode编码时的“占满”情况列出:

17全角
16全角,1半角
15全角,3半角
14全角,5半角
13全角,7半角
12全角,8半角
11全角,10半角
10全角,12半角
9全角,13半角
8全角,15半角
7全角,17半角
6全角,19半角
5全角,21半角
4全角,22半角
3全角,24半角
2全角,26半角
1全角,28半角
29半角

利用濒于发生按特殊规律A换行的情形,很容易测出所有“占满”的情形:
例如,一二三四五六七八九十012345678912一二三四五六七八九十 //10全角,12半角占满
一二三四五六七八九十0123456789123一二三四五六七八九十 //红字处按特殊规律A换行,蓝字处按9全角,13半角占满换行

cols=30,网页按GB2312编码时, “占满”规律不同了:

14全角,1半角
13全角,3半角
12全角,5半角
11全角,7半角
10全角,9半角
9全角,11半角
8全角,13半角
7全角,15半角
6全角,17半角
5全角,19半角
4全角,21半角
3全角,23半角
2全角,25半角
1全角,27半角
29半角

这样的话,要根据网页的编码方式和cols,通过实验具体才能测出“占满”规律。

从textarea内容的开头起计算全角和半角字符的数目,根据“占满”规律及特殊规律A决定第一个直观换行的位置,再从第二行(包括物理行和直观行)起 计算全角和半角字符的数目,根据“占满”规律及特殊规律A决定第二个直观换行的位置……如是继续下去,直到textarea内容的末尾。这样就可以得到所 有的换行位置了。

当然实际应用时没必要也没可能这样做实验啦,比如说选中textarea的第X行到第Y行,还没了解官方的办法是怎样的,我是这么办的:

 

 

ExpandedBlockStart.gif 代码
< textarea rows = 5  cols = 30  id = abc >
祖父听说我要带女朋友去钓鱼,也想去会会她。我带了女朋友先去,等候祖父的时候,我已经钓到了一条18公斤重的鲈鱼。
祖父到了,我把女友介绍给他认识,又举起那条鱼给他看。
真不错!他说,怎样钓上的?
用蚯蚓。我回答。
那就奇了,他故意一本正经地说,
我那一代至少要用一顿饭和一场电影!
< / textarea>
< script language = JScript >
/*
Create by Bound0 on Blueidea
mailto:bound0eureka@gmail.com
*/
function  sele(s,e){
var  src  =  document.getElementById( " abc " )
var  oTR  =  src.createTextRange()
var  text = src.innerText
var  textLength  =  text.length
conts
= [ 0 ]
/*  我一开始不知道getClientRects()方法,就用这段代码取textarea内容开始处在网页中的大致坐标,可见条条大路通罗马
Obj=src
for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent);
startx=sumLeft+6 //textarea内容开始处在网页中的大致坐标
starty=sumTop+9
*/
startx
= src.createTextRange().getClientRects()[ 0 ].left
starty
= src.createTextRange().getClientRects()[ 0 ].top
stepy
= 3   // 光标向下移动的步长,不能大于textarea中的字高
currentScr = 0   // 当前滚动条位置
stepScr = 30   // 滚动条向下滚动的步长,不能大于textarea的高度
while ( 1 ){src.scrollTop = currentScr
currenty
= starty
while ( 1 // 光标从textarea内容的开头开始向下移动,遍历各行,在conts[]中记下各换行位置
{oTR.moveToPoint(startx, currenty)
oTR.moveEnd(
" character " , textLength)
cont 
=  textLength  -  oTR.text.length
if (cont >= textLength) break
if (cont > conts[conts.length - 1 ])conts[conts.length] = cont
currenty
+= stepy
}
if (currentScr >= src.scrollHeight) break
currentScr
+= stepScr
}
if (e == "" )e = s
s
= parseInt(s)
e
= parseInt(e)
if (isFinite(s) && isFinite(e) && s > 0 && e > 0 ){ if (s > conts.length || e > conts.length){alert( " 总共只有 " + conts.length + " 行。 " // 检查参数有效性
return }
if (e < s){e = s;end.value = e}  // 如果结束行在开始行之前,强行调整参数
src.scrollTop = 0
oTR.moveToPoint(startx,starty) 
// 光标回到textarea内容的开头
st = conts[s - 1 ]
texpreStart
= text.substr( 0 ,st).replace( / \r / g, "" // 自textarea内容的开头至选择起点前的字串,由于moveStart方法将\r\n视为一个字符,需要修正计数
st = texpreStart.length
oTR.moveStart(
" character " ,st)
en
= textLength
if (e < conts.length)en = conts[e]
texpreEnd
= text.substr( 0 ,en).replace( / \r / g, "" // 自textarea内容的开头至选择结束点前的字串,由于moveEnd方法将\r\n视为一个字符,需要修正计数
en = texpreEnd.length
oTR.moveEnd(
" character " , en - st)
oTR.select()
}
}
< / script>
选中第 < input name = start value = 3 > 行至第 < input name = end value = 5 >
< button onclick = sele(start.value,end.value) > select < / button>


 

 

 

 04 年初写的东西,应该是目前研究比较全面的了吧??

原帖: http://bbs.blueidea.com/viewthread.php?tid=1358630


 

ExpandedBlockStart.gif 代码
< style >
{
    font-size
:  12px ;
}
</ style >
< script  language ="javascript" >
//  Coded by windy_sk <windy_sk@126.com> 20040210
function  reportError(msg,url,line) {
    
var  str  =   " You have found an error as below: \n\n " ;
    str 
+=   " Err:  "   +  msg  +   "  on line:  "   +  line;
    alert(str);
    
return   true ;
}
window.onerror 
=  reportError;
function  show_all(obj, txt_obj) {
    
var  x, y;
    txt_obj.value 
=   "" ;
    
for (x  in  obj) {
        
if ( typeof (obj[x]) == " object " ) {
            txt_obj.value 
+=  x  +   "  : \n " ;
            
for (y  in  obj[x])
                txt_obj.value 
+=   "      "   +  y  +   "  -     "   +  obj[x][y]  +   " \n " ;
        } 
else  {
            txt_obj.value 
+=  x  +   "  -     "   +  obj[x]  +   " \n " ;
        }
    }
    
return ;
}
var  cur_pos  =   0 ;
var  p_row  =   0 ;
var  p_col  =   0 ;
var  v_row  =   0 ;
var  v_col  =   0 ;
var  s_len  =   0 ;
var  r_count  =   0 ;
function  get_txt_pos() {
    
try {
        
var  obj  =  document.getElementById( " test " );
        
var  rng  =  obj.createTextRange();
        
var  rng_sel  =  obj.document.selection.createRange();
        
var  if_end  =   false ;
        
var  arr_sel  =   new  Array();
        
        show_all(rng, ctr);
        show_all(rng_sel, cr)
        show_all(rng.getClientRects(), ctr_crt);
        show_all(rng_sel.getClientRects(), cr_crt)
        show_all(rng.getBoundingClientRect(), ctr_bcrt);
        show_all(rng_sel.getBoundingClientRect(), cr_bcrt)
        
        s_len 
=  rng_sel.text.replace( / \r / "" ).length;
        rng.moveToPoint(rng_sel.offsetLeft, rng_sel.offsetTop);
        rng.moveStart(
' character ' - obj.value.length);
        
try  {
            r_count 
=  rng.text.match( / \r / g).length;
        } 
catch (e) {
            r_count 
=   0 ;
        }
        cur_pos 
=  rng.text.length;
        
        if_end 
=  (rng.getBoundingClientRect().left  ==  rng_sel.getBoundingClientRect().left);
        arr_sel 
=  rng.text.split( " \r\n " );
        p_row 
=  arr_sel.length;
        p_col 
=  if_end ? 0 :arr_sel[arr_sel.length - 1 ].length;
        
        
var  rct  =  rng.getClientRects();
        v_row 
=  rct.length;
        rng.moveToPoint(rct[v_row
- 1 ].left, rct[v_row - 1 ].top);
        rng.moveStart(
' character ' - cur_pos);
        v_col 
=  if_end ? 0 :(cur_pos  -  rng.text.length);
        
if (v_col  -  p_col  ==   2 ) v_col  =  p_col;
        
        err.value 
=   "" ;
    }
catch (e){
        show_all(e, err)
        cur_pos 
=   0 ;
        p_row 
=   0 ;
        p_col 
=   0 ;
        v_row 
=   0 ;
        v_col 
=   0 ;
        s_len 
=   0 ;
        r_count 
=   0 ;
    }
    show_txt_pos();
    
return ;
}
function  restore_txt() {
    
var  obj  =  document.getElementById( " test " );
    obj.focus();
    
var  rng  =  obj.createTextRange(); 
    rng.moveStart(
' character ' , cur_pos  -  r_count);
    rng.collapse(
true );
    rng.moveEnd(
' character ' , s_len);
    rng.select();
    show_txt_pos();
    
return ;
}
function  show_txt_pos() {
    cur_pos_show.innerText 
=  cur_pos  -  r_count;
    p_row_show.innerText 
=  p_row;
    p_col_show.innerText 
=  p_col;
    v_row_show.innerText 
=  v_row;
    v_col_show.innerText 
=  v_col;
    
return ;    
}
</ script >
< table >< tr >< td >
< textarea  id ="test"  style ="width:400px; height:200px"  onclick ="get_txt_pos()"  onkeyup ="get_txt_pos()" >
1 - 1234567890
2 - 12345678901234567890
3 - 123456789012345678901234567890
4 - 1234567890123456789012345678901234567890
5 - 12345678901234567890123456789012345678901234567890
6 - 123456789012345678901234567890123456789012345678901234567890
7 - 1234567890123456789012345678901234567890123456789012345678901234567890
8 - 12345678901234567890123456789012345678901234567890123456789012345678901234567890
9 - 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
0 - 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</ textarea >
</ td >< td  width ="50" > &nbsp; </ td >< td  valign ="top" >
< b > Current Position :  </ b >< span  id ="cur_pos_show" ></ span >< br  />
< b > Physical Row:  </ b >< span  id ="p_row_show" ></ span >< br  />
< b > Physical Column:  </ b >< span  id ="p_col_show" ></ span >< br  />
< b > Visible Row:  </ b >< span  id ="v_row_show" ></ span >< br  />
< b > Visible Column:  </ b >< span  id ="v_col_show" ></ span >< br  />
< b > Error Message:  </ b >< br  />
< textarea  id ="err"  style ="width:350px; height:120px" ></ textarea >
</ td ></ tr ></ table >
< input  type ="button"  name ="textfield"  onclick ="restore_txt()"  value ="Restore Selection" >
< br  />
< br  />
< table >
< tr >
< td >< b > CreateRange </ b >< br  />
< textarea  id ="cr"  style ="width:400px; height:200px" ></ textarea >
</ td >< td >< b > CreateTextRange </ b >< br  />
< textarea  id ="ctr"  style ="width:400px; height:200px" ></ textarea >
</ td >
</ tr >
< tr >
< td >< b > CreateRange.getClientRects() </ b >< br  />
< textarea  id ="cr_crt"  style ="width:400px; height:200px" ></ textarea >
</ td >< td >< b > CreateTextRange.getClientRects() </ b >< br  />
< textarea  id ="ctr_crt"  style ="width:400px; height:200px" ></ textarea >
</ td >
</ tr >
< tr >
< td >< b > CreateRange.getBoundingClientRect() </ b >< br  />
< textarea  id ="cr_bcrt"  style ="width:400px; height:200px" ></ textarea >
</ td >< td >< b > CreateTextRange.getBoundingClientRect() </ b >< br  />
< textarea  id ="ctr_bcrt"  style ="width:400px; height:200px" ></ textarea >
</ td >
</ tr >
</ table >


 

5楼的代码,我似懂非懂,但是似乎取直观行边界的时候有点小bug……
如果要 真·马甲 写 bound0 的那个选中textarea的第X行到第Y行的类似效果,怎么写法?

 

 verylucky在上个帖子中说

引用:
5楼的代码,我似懂非懂,但是似乎取直观行边界的时候有点小bug……
如果要 真·马甲 写 bound0 的那个选中textarea的第X行到第Y行的类似效果,怎么写法?
那个物理行和直观行只是针对鼠标点击的起始位置,还有一种可能就是文本的换行符貌似是在下一行的首位,如果要以 /n 来区分的话就需要做些额外的判断~~~

关于选取的问题,我想你没有了解“Restore Selection” 的那个按钮吧? 可以在文本框失去焦点后,回复丢掉的选取~~~~

我那个东西只是做了一下有关 textRange 相关属性方法的测试,以及一些基本应用的尝试,只要了解相关的方法,其他的应用就仅仅是扩展了~~~

可惜目前 mozilla 之可以针对 window 建立 range,对于 textarea 就不行了,不爽中~~~

现在严重缺少研究的心态,老了~~~~~

 

 

 

 

 

 

根据被某网站匿名转载的页面( http://dl.pconline.com.cn/html_2/4/545/id=38457&pn=0.html )上的网友留言,上面的《JS实现文本域的任意行选定》示例代码有一处bug:即在滚动条不在顶端的情况下运行示例代码会出错。现已修正:只增加了一行代码

复制内容到剪贴板
代码:
src.scrollTop=0 //确保开始数行数时滚动条位于顶部
修正后的完整代码如下:
<textarea rows=5 cols=30 id=abc> Bound0 子确工作室 生物信息学相关业务简介 [多步生物信息查询的一步化] 将繁琐的多步生物信息查询合并为一步,减少在各个网页间的手工跳转。 只要能够理清多步生物信息查询的流程就可能做到一步化。 [批量数据转录、整合] 将大量零散的文档收录到数据库中或整理、转化为符合要求的格式。 例如:将数百个结构复杂的word文档内容收录到数据库中。 [定制Bound0 Eureka预选器数据库] 利用Bound0 Eureka预选器数据库可以初步判断样品的成分,缩小进一步实验的处理范围,对接下来的实验环节做出调整,或预选出最佳的实验方案,从而缩短研究、开发 的周期,节省人力物力。还可以初步验证某些假设推断,并有助于提出新的假设推断,构建新的假说。同时让交流和教学过程变得更简单、方便。 有关Bound0 Eureka预选器数据库核心技术的专利申请已被受理,专利申请号:200610077985.3。 定制Bound0 Eureka预选器数据库(Bound0 Eureka Preselector)的业务实质: 1、定制公共数据库内容的本地化整合。 2、定制数据库查询方式和查询项目。 3、定制分析、统计功能。 4、定制数据共享功能。 5、定制教学展示功能。 6、定制其他辅助功能。 例如:Bound0酵母蛋白Eureka预选器数据库的数据内容整合了SGD数据库(Saccharomyces Genome Database,酵母基因组库http://www.yeastgenome.org/)中的部分数据。共包含6713个蛋白的信息。 Bound0酵母蛋白Eureka预选器数据库具有以下基本功能: (1)Eureka Preselector(主功能): 根据条件给出符合条件的蛋白质列表。根据蛋白质的特征与目标特征的接近程度对列表内的蛋白质进行排名。以网页形式输出、保存 Eureka 结果。对保存的结果进行对比分析。 (2)以树状结构显示(treeview)蛋白质的各种生物学信息。 (3)以搜索引擎形式,对描述蛋白质充当的细胞组分、参与的生物过程、分子功能等描述性特征的标准化术语(GO Term)提供注释和指导。 (4)以搜索引擎形式,对蛋白质的各种ID、名称进行通译。 (5)在安装了Bound0酵母蛋白Eureka预选器数据库的计算机上,实现自定义的eureka:// 协议。可以在用户自己的网页中以超级链接(文字链接、图片热点链接等)的方式动态地调用数据库中的内容进行演示。 (6)自动生成上述演示所需要的链接代码。 (7)独立发行(便于数据共享)的数据分析配件,可对以网页形式保存的 Eureka 结果进行处理。 更多详情请置询bound0@tom.com</textarea> <script language=JScript> /* Create by Bound0 on Blueidea mailto:bound0@tom.com */ function sele(s,e){ var src = document.getElementById("abc") var oTR = src.createTextRange() var text=src.innerText var textLength = text.length conts=[0] /* 我一开始不知道getClientRects()方法,就用这段代码取textarea内容开始处在网页中的大致坐标,可见条条大路通罗马 Obj=src for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent); startx=sumLeft+6 //textarea内容开始处在网页中的大致坐标 starty=sumTop+9 */ src.scrollTop=0 //确保开始数行数时滚动条位于顶部 startx=src.createTextRange().getClientRects()[0].left starty=src.createTextRange().getClientRects()[0].top stepy=3 //光标向下移动的步长,不能大于textarea中的字高 currentScr=0 //当前滚动条位置 stepScr=30 //滚动条向下滚动的步长,不能大于textarea的高度 while(1){src.scrollTop=currentScr currenty=starty while(1) //光标从textarea内容的开头开始向下移动,遍历各行,在conts[]中记下各换行位置 {oTR.moveToPoint(startx, currenty) oTR.moveEnd("character", textLength) cont = textLength - oTR.text.length if(cont>=textLength)break if(cont>conts[conts.length-1])conts[conts.length]=cont currenty+=stepy } if(currentScr>=src.scrollHeight)break currentScr+=stepScr } if(e=="")e=s s=parseInt(s) e=parseInt(e) if(isFinite(s)&&isFinite(e)&&s>0&&e>0) {if(s>conts.length||e>conts.length){alert("总共只有"+conts.length+" 行。") //检查参数有效性 return} if(e<s){e=s;end.value=e} //如果结束行在开始行之前,强行调整参数 src.scrollTop=0 oTR.moveToPoint(startx,starty) //光标回到textarea内容的开头 st=conts[s-1] texpreStart=text.substr(0,st).replace(/\r/g,"") //自textarea内容的开头至选择起点前的字串,由于moveStart方法将\r\n视为一个字符,需要修正计数 st=texpreStart.length oTR.moveStart("character",st) en=textLength if(e<conts.length)en=conts[e] texpreEnd=text.substr(0,en).replace(/\r/g,"") //自textarea内容的开头至选择结束点前的字串,由于moveEnd方法将\r\n视为一个字符,需要修正计数 en=texpreEnd.length oTR.moveEnd("character", en-st) oTR.select() } } </script> 选中第<input name=start value=3>行至第<input name=end value=5>行 <button οnclick=sele(start.value,end.value)>select</button><br><br />

 

 

ExpandedBlockStart.gif 代码
< textarea rows = 5  cols = 30  id = abc >
Bound0 子确工作室 生物信息学相关业务简介
[多步生物信息查询的一步化]
将繁琐的多步生物信息查询合并为一步,减少在各个网页间的手工跳转。
只要能够理清多步生物信息查询的流程就可能做到一步化。
[批量数据转录、整合]
将大量零散的文档收录到数据库中或整理、转化为符合要求的格式。
例如:将数百个结构复杂的word文档内容收录到数据库中。
[定制Bound0 Eureka预选器数据库]
利用Bound0 Eureka预选器数据库可以初步判断样品的成分,缩小进一步实验的处理范围,对接下来的实验环节做出调整,或预选出最佳的实验方案,从而缩短研究、开发的周期,节省人力物力。还可以初步验证某些假设推断,并有助于提出新的假设推断,构建新的假说。同时让交流和教学过程变得更简单、方便。
有关Bound0 Eureka预选器数据库核心技术的专利申请已被受理,专利申请号:
200610077985.3
定制Bound0 Eureka预选器数据库(Bound0 Eureka Preselector)的业务实质:
1 、定制公共数据库内容的本地化整合。
2 、定制数据库查询方式和查询项目。
3 、定制分析、统计功能。
4 、定制数据共享功能。
5 、定制教学展示功能。
6 、定制其他辅助功能。
例如:Bound0酵母蛋白Eureka预选器数据库的数据内容整合了SGD数据库(Saccharomyces Genome Database,酵母基因组库http:
// www.yeastgenome.org/)中的部分数据。共包含6713个蛋白的信息。
Bound0酵母蛋白Eureka预选器数据库具有以下基本功能:
1 )Eureka Preselector(主功能): 根据条件给出符合条件的蛋白质列表。根据蛋白质的特征与目标特征的接近程度对列表内的蛋白质进行排名。以网页形式输出、保存 Eureka 结果。对保存的结果进行对比分析。
2 )以树状结构显示(treeview)蛋白质的各种生物学信息。
3 )以搜索引擎形式,对描述蛋白质充当的细胞组分、参与的生物过程、分子功能等描述性特征的标准化术语(GO Term)提供注释和指导。
4 )以搜索引擎形式,对蛋白质的各种ID、名称进行通译。
5 )在安装了Bound0酵母蛋白Eureka预选器数据库的计算机上,实现自定义的eureka: //  协议。可以在用户自己的网页中以超级链接(文字链接、图片热点链接等)的方式动态地调用数据库中的内容进行演示。
6 )自动生成上述演示所需要的链接代码。
7 )独立发行(便于数据共享)的数据分析配件,可对以网页形式保存的 Eureka 结果进行处理。
更多详情请置询bound0@tom.com
< / textarea>
< script language = JScript >
/*
Create by Bound0 on Blueidea
mailto:bound0@tom.com
*/
function  sele(s,e){
var  src  =  document.getElementById( " abc " )
var  oTR  =  src.createTextRange()
var  text = src.innerText
var  textLength  =  text.length
conts
= [ 0 ]
/*  我一开始不知道getClientRects()方法,就用这段代码取textarea内容开始处在网页中的大致坐标,可见条条大路通罗马
Obj=src
for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent);
startx=sumLeft+6 //textarea内容开始处在网页中的大致坐标
starty=sumTop+9
*/
src.scrollTop
= 0   // 确保开始数行数时滚动条位于顶部
startx = src.createTextRange().getClientRects()[ 0 ].left
starty
= src.createTextRange().getClientRects()[ 0 ].top
stepy
= 3   // 光标向下移动的步长,不能大于textarea中的字高
currentScr = 0   // 当前滚动条位置
stepScr = 30   // 滚动条向下滚动的步长,不能大于textarea的高度
while ( 1 ){src.scrollTop = currentScr
currenty
= starty
while ( 1 // 光标从textarea内容的开头开始向下移动,遍历各行,在conts[]中记下各换行位置
{oTR.moveToPoint(startx, currenty)
oTR.moveEnd(
" character " , textLength)
cont 
=  textLength  -  oTR.text.length
if (cont >= textLength) break
if (cont > conts[conts.length - 1 ])conts[conts.length] = cont
currenty
+= stepy
}
if (currentScr >= src.scrollHeight) break
currentScr
+= stepScr
}
if (e == "" )e = s
s
= parseInt(s)
e
= parseInt(e)
if (isFinite(s) && isFinite(e) && s > 0 && e > 0 ){ if (s > conts.length || e > conts.length){alert( " 总共只有 " + conts.length + " 行。 " // 检查参数有效性
return }
if (e < s){e = s;end.value = e}  // 如果结束行在开始行之前,强行调整参数
src.scrollTop = 0
oTR.moveToPoint(startx,starty) 
// 光标回到textarea内容的开头
st = conts[s - 1 ]
texpreStart
= text.substr( 0 ,st).replace( / \r / g, "" // 自textarea内容的开头至选择起点前的字串,由于moveStart方法将\r\n视为一个字符,需要修正计数
st = texpreStart.length
oTR.moveStart(
" character " ,st)
en
= textLength
if (e < conts.length)en = conts[e]
texpreEnd
= text.substr( 0 ,en).replace( / \r / g, "" // 自textarea内容的开头至选择结束点前的字串,由于moveEnd方法将\r\n视为一个字符,需要修正计数
en = texpreEnd.length
oTR.moveEnd(
" character " , en - st)
oTR.select()
}
}
< / script>
选中第 < input name = start value = 3 > 行至第 < input name = end value = 5 >
< button onclick = sele(start.value,end.value) > select < / button>


http://bbs.blueidea.com/viewthread.php?tid=2559480&page=  

 

 

 

转载于:https://www.cnblogs.com/neru/archive/2010/07/07/1772628.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值