关于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行，还没了解官方的办法是怎样的，我是这么办的：

运行代码框

<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>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18