视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001 知道1 知道21 知道41 知道61 知道81 知道101 知道121 知道141 知道161 知道181 知道201 知道221 知道241 知道261 知道281
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
关于textarea的直观换行的一些研究材料_javascript技巧
2020-11-27 20:33:27 责编:小采
文档

前两天研究了一下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半角占满得出

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

总结一下就有:


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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下载本文
显示全文
专题