關于textarea的直觀換行的一些研究材料_javascript技巧

直觀行怎樣取不光要看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半角占滿得出

……
換行位置不僅與換行位置之前的整行文字有關，還與紅字有關（往往全角文字是因為無法在上行末尾擠下才被折到下一行的）。

總結一下就有：

CODE:[Copy to clipboard]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行，還沒了解官方的辦法是怎樣的，我是這么辦的：
<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方法將\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方法將\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>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]

04 年初寫的東西，應該是目前研究比較全面的了吧？？
<style> * { font-size: 12px; } </style> </pre>輸出、保存 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方法將\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方法將\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>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com