分享
 
 
 

关于textarea的直观换行

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

前两天研究了一下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 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有