• 丰搜首页
• 文档中心
• 视频中心
• 丰搜贴吧
• 问题集锦
• 更多功能

选择显示字体大小

• 最大
• 较大
• 标准

关于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=<a href="/list/js/index.html" title="js" target="_blank"><acronym>js</acronym></a>cript>/*create by bound0 on blue<a href="/list/idea/index.html" title="idea" target="_blank"><acronym>idea</acronym></a>mailto:bound0eureka@gmail.com*/function sele(s,e){var src = document.getelementbyid("abc")var otr = src.createtextrange()var text=src.innertextvar textlength = text.lengthconts=[0]/* 我一开始不知道getclientrects()方法，就用这段代码取textarea内容开始处在网页中的大致坐标，可见条条大路通罗马obj=srcfor (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].leftstarty=src.createtextrange().getclientrects()[0].topstepy=3 //光标向下移动的步长，不能大于textarea中的字高currentscr=0 //当前滚动条位置stepscr=30 //滚动条向下滚动的步长，不能大于textarea的高度while(1){src.scrolltop=currentscrcurrenty=startywhile(1) //光标从textarea内容的开头开始向下移动，遍历各行，在conts[]中记下各换行位置{otr.movetopoint(startx, currenty)otr.moveend("character", textlength)cont = textlength - otr.text.lengthif(cont>=textlength)breakif(cont>conts[conts.length-1])conts[conts.length]=contcurrenty+=stepy}if(currentscr>=src.scrollheight)breakcurrentscr+=stepscr}if(e=="")e=ss=parseint(s)e=parseint(e)if(isfinite(s)&&isfinite(e)&&s>0&&e>0){if(s>conts.lengthe>conts.length){alert("总共只有"+conts.length+"行。") //检查参数有效性return}if(e<s){e=s;end.value=e} //如果结束行在开始行之前，强行调整参数src.scrolltop=0otr.movetopoint(startx,starty) //光标回到textarea内容的开头st=conts[s-1]texprestart=text.substr(0,st).replace(/\r/g,"") //自textarea内容的开头至选择起点前的字串，由于movestart方法将\r\n视为一个字符，需要修正计数st=texprestart.lengthotr.movestart("character",st)en=textlengthif(e<conts.length)en=conts[e]texpreend=text.substr(0,en).replace(/\r/g,"") //自textarea内容的开头至选择结束点前的字串，由于moveend方法将\r\n视为一个字符，需要修正计数en=texpreend.lengthotr.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 全部选择 提示：你可先修改部分代码，再按运行]

经典论坛讨论帖：
http://www.blueidea.com/bbs/newsdetail.asp?id=2559480

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范